我正在为即将到来的 HTML 考试做准备并正在练习 CSS。我遇到了一个问题,我的 sub-div 不会留在我的 main-div 中。我想要的是让 3 个子 block 均匀地填满大块内的所有空间。如果你们中的任何人可以提供帮助,将不胜感激! 这是代码。
HTML:
<div id="blk1">
<div id="sb1">
<p id="htitle">Hotel 1</p>
<img id="hpic" src="hpic1.jpg">
</div>
<div id="sb2">
<p id="htitle">Hotel 2</p>
<img id="hpic" src="hpic2.jpg">
</div>
<div id="sb3">
<p id="htitle">Hotel 3</p>
<img id="hpic" src="hpic3.jpg">
</div>
</div><!-- End of Blk1 -->
CSS:
#blk1{
border: 1px solid blue;
position:relative;
}
#sb1{
border: 1px solid black;
float: left;
position:relative;
width:33%;
}
#sb2{
border: 1px solid black;
float: left;
width:33%;
}
#sb3{
border: 1px solid black;
float: left;
width:33%;
}
最佳答案
您正在复制 CSS 代码,我建议改用类。然后使用 box-sizing: border-box;
属性将边框考虑到 width
的计算:
.sb{
border: 1px solid black;
float: left;
position:relative;
width:33.33%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
然后,一个元素的id
应该是唯一,所以你只需要使用这个id #htitle
一次,对于#hpic
或改用类。
关于html - CSS 子 div 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37156215/