Блог

Главная - Вопросы по программированию - Граница CSS не обтекает вложенные разделы

Граница CSS не обтекает вложенные разделы

#html #css

#HTML #css

Вопрос:

Просто интересно, почему .border не будет обтекать вложенные divs d1, d2, d3.

Div с идентификатором main1 имеет сплошную границу размером 5 пикселей, которую я пытаюсь обернуть вокруг трех вложенных divs с идентификаторами div1, div2, div3. Каждый из вложенных разделов имеет собственную сплошную границу размером 2 пикселя. Похоже, это должно сработать, но, возможно, что-то где-то перезаписывается.

введите описание изображения здесь

 .border {border: 5px solid RosyBrown;}
.border-thin {border: 2px solid RosyBrown;}
div#main1 {width: 90%;margin: 0 auto 0 auto;}
div#d1 {width: 31%; float: left;}
div#d2 {width: 31%; float: left; margin: 0 0 0 3.5%;}
div#d3 {width: 31%; float: right;}

<div id="main1" class="center border">
   <p>Main</p>
     <div id="d1" class="border-thin">
       <p>d1</p>
     </div>
     <div id="d2" class="border-thin">
       <p>d2</p>
     </div>
     <div id="d3" class="border-thin">
      <p>d3</p>
     </div>
</div>

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

1. Вы должны очистить значение с плавающей точкой.

2. Плавающие элементы не учитываются при вычислении высоты родительских элементов. Google для «css clearfix». Удалите <p>Main</p> , и вы увидите, что ваша div#main1 высота полностью уменьшится, потому что все ее дочерние элементы плавают, оставляя ее на вычисленной высоте 0. Кроме того, я настоятельно рекомендую вам никогда не использовать селекторы идентификаторов в css, если вы точно не знаете, зачем вы их используете.

Ответ №1:

Поскольку вы не очистили значения с плавающей точкой, поскольку это не занимает поток представления. Дайте:

 overflow: hidden;

к родительскому div, или вы можете использовать clearfix .

 .border {
  border: 5px solid RosyBrown;
}
.border-thin {
  border: 2px solid RosyBrown;
}
div#main1 {
  width: 90%;
  margin: 0 auto 0 auto;
  overflow: hidden;
}
div#d1 {
  width: 31%;
  float: left;
}
div#d2 {
  width: 31%;
  float: left;
  margin: 0 0 0 3.5%;
}
div#d3 {
  width: 31%;
  float: right;
} 
 <div id="main1" class="center border">
  <p>Main</p>
  <div id="d1" class="border-thin">
    <p>d1</p>
  </div>
  <div id="d2" class="border-thin">
    <p>d2</p>
  </div>
  <div id="d3" class="border-thin">
    <p>d3</p>
  </div>
</div>

Предварительный просмотр

--

Ответ №2:

Это связано с элементами float. По умолчанию они не включаются в высоту других разделов.

Добавить overflow: hidden; в #main1 . Я знаю, это звучит странно, но это работает…

Метки: