Блог

Главная - Вопросы по программированию - Должны ли два встроенных divs иметь значения с плавающей запятой?

Должны ли два встроенных divs иметь значения с плавающей запятой?

#html #css

#HTML #css

Вопрос:

У меня есть два дочерних div, которые встроены на 50% каждый внутри родительского div. Я использую :after родительский элемент для рисования hr под ним с верхним и нижним полями размером 15 пикселей.

Они hr не будут помещаться под родительский div, если я не перемещу один из дочерних div влево или вправо. Если я перемещаю их оба, hr рендеринг отображается где-то в середине родительского div.

Я переместил левый дочерний div влево, и он отображается нормально, но побуждает меня спросить: не нужно ли мне перемещать оба дочерних div, или это приемлемо, или правильнее перемещать их оба?

Редактировать:

Обратите внимание, как скрипка показывает hr почти поверх родительского .double div.

http://jsfiddle.net/SatdL/

 .single,
.double {
float:left;
width:100%
}

.single:after,
.double:after {
Content:"";
margin:15px 0;
background-color:#FFFFFF;
border-bottom:1px solid #E2E2E2;
box-sizing:content-box;
display:block;
height:1px;
}

.double .small-left {
width:49%;
float:left;
display:inline-block;
padding-right:15px;
border-right:1px solid #E2E2E2;
vertical-align:top;
}

.double .small-right {
width:42%;
float:right;
border:none;
display:inline-block;
padding-left:15px;
vertical-align:top;
}


<div class="double">
  <div class="small-left">Test</div>
  <div class="small-right">Test</div>
</div>

Комментарии:

1. Можете ли вы включить свой текущий код в свой вопрос? Кроме того, помогает его предоставление в JSFiddle .

2. Конечно, отметьте. Я добавлю скрипку.

Ответ №1:

Я не понимаю, это то, чего вы пытаетесь достичь? Проверьте это

 .small-left,
.small-right {
    width:48%;
    float:left;
    padding:0 1%;
    border-bottom:1px solid #ccc;
}

.small-left {
    border-right: 1px solid #ccc;
    margin-left:-1px;
}

Ответ №2:

Я уверен, что вы могли бы достичь того, что вам нужно, без использования ::after

Однако исправление, использующее этот метод, состоит в том, чтобы просто добавить clear:both, чтобы он помещался под другим содержимым этого класса. Вам, вероятно, также не нужна высота: 1px;

 .single:after,
.double:after {
Content:"";
clear:both;
border-bottom:1px solid #E2E2E2;
box-sizing:content-box;
display:block;

}

http://jsfiddle.net/HH5s7/

Метки: