Question

我曾经在div的末尾添加<br clear=all>，在CSS中没有高度值来设置它的高度。

div会根据内容缩小和增长。

有没有更有说服力的方法将所有方框的div高度设置为最高方框的高度，而不使用<br clear=all>？记住div会根据里面的内容改变高度。

以下是代码示例：

<div class="welcomeText">
  <div class="houseTiles2">
    <h1>TITLE<br><br></h1>
    <p><br>Body copy 1</p><br clear="all">
  </div>
  <div class="houseTiles">
    <h1 class="tileTitle">Title 2</h1><br>
    <p class="tileDesc">Text text text text text text text text</p>
 <br clear="all">
  </div>
  <div class="houseTiles">
    <h1 class="tileTitle">Title 3</h1><br>
    <p class="tileDesc">Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p><br clear="all">
  </div><br clear="all">
</div>

Answer 1

您应该使用

<br style="clear: both">

，因为clear属性已弃用。但是，它并不是很有说服力。

更有说服力的是使用一个类：

.clear {
  clear: both;
}

另一种方法是将以下类放在包含元素上：

.container {
  overflow: hidden; /* can also be "auto" */
}

然后是＆＃34; clearfix＆＃34;方法，放在包含元素上：

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

您可以在那里阅读更多内容：http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

编辑：如果您希望div的高度相同，并且您要定位IE10 +，则可以使用flexbox。非常简单：http://learnlayout.com/flexbox.html

这里有关于flexbox的互动教程：http://cvan.io/flexboxin5/

Answer 2

最好的可能是使用clearfix方法：

.welcomeText:before, .welcomeText:after {
   content:"";
   display:table;
}

.welcomeText:after {
  clear:both;
}

在CSS的开头，我们使用了一个带有＆＃34;清除的div：两个＆＃34;属性

但是现在使用CSS我们可以使用伪元素，这些元素类似于div中的元素，但是使用CSS创建。

您可以阅读有关清除浮动的任何文章。例如：这个解释了浮点数的问题：http://diywpblog.com/when-and-how-to-use-a-clearfix-css-tutorial/

但这不是你参加的答案，因为你希望所有的孩子div都与父div一样高。

您可以对其父级display:table使用display:table-cell，但可以删除float:left;

Answer 3

使用CSS不能自动使div具有相同的高度（除非你给出一个固定的高度）。

然而，它与jQuery（使div的高度相同）：

var heights = [];

$(".houseTiles, .houseTiles2").each(function() {
    heights.push($(this).height());
});

var biggestheight = Math.max.apply(null, heights);

$(".houseTiles, .houseTiles2").each(function() {
    $(this).css("height",biggestheight);
});

如此JSFiddle demo所示。

对于具有高度的浮动元素，您可以为它们提供以下 CSS ：

.houseTiles, .houseTiles2 {
    display:table;
    overflow:hidden;
}

这也可以清除浮动，就像您使用clear=all或clear:both一样。

在没有高度的div上使用<br clear="all"/>的CSS方式？

3 个答案: