Question

我有一个带div标签的简单html代码

<div class="left">Proj Name：</div> 
<div class="right">must have a name</div>
<div >Shouldn't this be on a new line?</div>

并且类在样式表中定义为

.left {
  float: left;
  width: 125px;
  text-align: right;
  margin: 2px 10px;
  display: inline
}
.right {
  float: left;
  text-align: left;
  margin: 2px 10px;
  display: inline
}

我遇到的问题是，似乎存在一个超级拼版，其中任何div标签都会在涉及到对齐元素时忽略前一个标签的存在。请参阅http://jsfiddle.net/tea0phnr/2/了解我在说什么。

Answer 1

CSS

.clear {clear:both;}

HTML

<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
<div class="clear"></div>
<div >Shouldn't this be on a new line?</div>

http://jsfiddle.net/tea0phnr/3/

Answer 2

你的浮动div被拉出流 - 导致最后一个div在实际流程中恢复它们的位置。您需要clear:both;最后一个div，或者可能需要伪元素。（div：last-child：after）

div:last-child {
    clear: both;
}

http://jsfiddle.net/hzdcu1xw/

或者也可以float + width: 100%;。

div:last-child {
    float: left;
    width: 100%;
}

http://jsfiddle.net/efapLo2d/以便相应地进行布局。

div叠加在其他div上

2 个答案: