webentwicklung-frage-antwort-db.com.de

füge eine vertikale Trennlinie zwischen zwei verschachtelten Divs ein, nicht in voller Höhe

Ich habe links und rechts schweben <div> in ein hellblaues Kästchen geschachtelt, wie in der folgenden Abbildung dargestellt. Ich kann nicht herausfinden, wie eine vertikale Linie zwischen ihnen eingefügt wird, wie in diesem Bild gezeigt:

enter image description here

Das hat folgende Eigenschaften:

1) Polsterung/Rand auf jeder Seite, die ich kontrollieren kann oder die vernünftig aussieht (d. H. Nicht viel näher an einer Div als an der anderen)

2) Lässt einen Rand darüber und darunter, wie gezeigt, d. H. Erstreckt sich nicht über die gesamte vertikale Breite des hellblauen Bereichs

3) Behält # 1 und # 2 dynamisch bei, wenn das Browserfenster größer/kleiner wird und die Größe des blauen Kastens mit ihm zunimmt/abnimmt

Ich suche eine einfache, vorzugsweise nur CSS-Lösung.

Relevantes CSS:

#left {
  position: relative;
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
}

#right {
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;
}

#blue_box {
  position: relative;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  margin-left: 40%;
  overflow: auto; /*needed so that div stretches with child divs*/
}
htmlcssheightabsolutedivider
22
Tim Koelkebeck

Verwenden Sie ein Div für Ihren Divider. Es wird immer vertikal zentriert, unabhängig davon, ob der linke und der rechte Teil der Höhe gleich sind. Sie können es überall auf Ihrer Site wiederverwenden.

.divider{
    position:absolute;
    left:50%;
    top:10%;
    bottom:10%;
    border-left:1px solid white;
}

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/gtKBs/

49
Hussein

Versuche dies. Ich habe die blaue Box so eingestellt, dass sie nach rechts schwimmt, links und rechts eine feste Höhe zugewiesen und rechts vom linken div einen weißen Rand hinzugefügt. Es wurden auch abgerundete Ecken hinzugefügt, um Ihrem Beispiel besser zu entsprechen (dies funktioniert nicht in 8 oder weniger). Ich habe auch die Position rausgenommen: relativ. Du brauchst es nicht. Blockebenenelemente werden standardmäßig relativ positioniert.

Sehen Sie es hier: http://jsfiddle.net/ZSgLJ/

#left {
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
  border-right: 1px solid white;
  height:400px;
}

#right {
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;
  height:400px;
}

#blue_box {
  background-color:blue;
  border-radius: 10px;
  -moz-border-radius:10px;
  -webkit-border-radius: 10px;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  float: right;
}
1
Adam

Sie können sich keine einzige CSS-Lösung vorstellen, aber konnten Sie nicht einfach einen Div zwischen diesen 2 erstellen und die Eigenschaften im CSS so einstellen, dass sie wie eine Linie aussehen, wie sie im Bild dargestellt ist? Wenn Sie Divs als Tabellenzellen verwenden, ist dies eine ziemlich einfache Lösung für das Problem

0
John