вставить вертикальную разделительную линию между двумя вложенными элементами div, а не на всю высоту - PullRequest
Новая
       24

вставить вертикальную разделительную линию между двумя вложенными элементами div, а не на всю высоту

22 голосов
/ 20 марта 2011

Я плаваю влево и плаваю вправо <div>, вложенный в светло-голубой блок div, как показано на рисунке ниже. Я не могу понять, как вставить вертикальную линию между ними, как показано на этом рисунке:

enter image description here

Имеет следующие свойства:

1) отступы / поля с любой стороны, которыми я могу управлять или которые выглядят разумными (т.е. не намного ближе к одному элементу, чем к другому)

2) оставляет поле выше и ниже, как показано, то есть не расширяет всю ширину по вертикали светло-голубого цвета * div

3) динамически поддерживает # 1 и # 2, когда окно браузера становится больше / меньше, а размер синего ящика увеличивается / уменьшается с ним

Я ищу простое, желательно CSS-решение.

Соответствующий 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*/
}

Ответы [ 3 ]

49 голосов
/ 20 марта 2011

Используйте div для вашего делителя.Он всегда будет отцентрирован по вертикали независимо от того, равны ли высота слева и справа.Вы можете использовать его в любом месте на вашем сайте.

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

Проверьте рабочий пример на http://jsfiddle.net/gtKBs/

1 голос
/ 20 марта 2011

Попробуй это.Я установил синее поле, чтобы оно плавало вправо, назначил левую и правую фиксированную высоту и добавил белую рамку справа от левого div.Также добавлены закругленные углы, чтобы больше соответствовать вашему примеру (они не будут работать, например, 8 или меньше).Я также вынес позицию: родственникТебе это не нужно.Элементы уровня блока по умолчанию установлены в относительное положение.

См. Здесь: 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;
}
0 голосов
/ 20 марта 2011

Не можете придумать единственное решение CSS, но не могли бы вы просто иметь div между этими двумя и установить в CSS свойства, чтобы они выглядели как линия, как показано на рисунке? Если вы используете div как ячейки таблицы, это довольно простое решение проблемы

...