如何使并排标签底部彼此对齐

Question

我在使用html开发网站时遇到了问题。基本上，我有两个div标签并排排列。然而，当第一div标签的内容太长时，内容可能需要多于一行才能显示。由于第二个div中的内容很短，因此只需要显示一行。

<div style="float:left;width:80%;">XXX ... XXX</div>
<div align="right" style="float:right;width:20%;">YYY</div> 

在这种情况下，内容的结尾不会彼此对齐。当我再添加一个（第三个）div标签时，内容将在第一个标签之后，而不是开始一个新行。我附上了两张图片，以便从解决方案中显示问题和我想要的内容。

Answer 1

在第三个div上使用style="clear:both"。

＆＃13;

＆＃13;

<div style="float:left; width: 80%">text 1<br>text 1</div>
<div style="float:right; width: 20%">text 2</div>
<div style="clear:both">text 3</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以添加额外的<div>，并将样式clear both应用于其中

＆＃13;

＆＃13;

.one {
  width: 48%;
  margin-right:2%;
  float: left;
  height: 150px;
  background-color: red;
}

.two {
  width: 48%;
  float: left;
  height: 100px;
  background-color: blue;
}

.clear {
  clear: both;
}

.three {
  width: 100%;
  margin-top: 10px;
  background-color: green;
  height: 50px;
}

＆＃13;

<div class="one"> div 1 </div>
<div class="two"> div 2 </div>
<div class="clear"></div>
<div class="three"> div 3 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

请尝试使用：

#container .col-1 {width: 20%;}
#container .col-2 {width: 40%;}
#container .col-3 {width: 60%;}
#container .col-4 {width: 80%;}

#container {
  width: 100%;
  display: inline-block;
  font-size: 75%;
}
#container > div {
  float: left;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

<div id="container">
  <div class="tag-1 col-4">
    <h1>Tag 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="tag-2 col-1">
    <h1>Tag 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  </div>
  <div class="tag-3">
    <h1>Tag 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

Answer 4

浮动元素，影响他们的兄弟姐妹，这种浮动的行为需要删除，否则可能会导致许多问题，如你所提到的。除非浮动行为被清除，否则浮动元素的父级也不会占用高度。 现代浏览器为我们处理它，但我们仍然应该编写一个干净的代码。

我们可以将浮动效果清除为：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="clearfix">
  <div style="float:left;width:80%;">XXX ... XXX</div>
  <div align="right" style="float:right;width:20%;">YYY</div>
</div>