Question

我正准备即将开始的HTML考试和练习CSS。我遇到了一个问题，我的子div不会留在我的主要div中。我想要的是让3个子块均匀地填满大块内的所有空间。如果您有任何人可以帮助我们，我们将不胜感激！这是代码。

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代码，我建议改用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

CSS sub-div定位

1 个答案: