html - CSS 子 div 定位

Question

我正在为即将到来的 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%;
}

Answer 1

您正在复制 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 或改用类。

See this fiddle