关于html：使用＆lt; br clear = all＆gt;的CSS方式


A CSS way of using <br clear=all> on divs without heights?

本问题已经有最佳答案，请猛点这里访问。

我曾经在一个DIV的末尾添加
，在CSS中没有高度值，来设置它的高度。

分隔符根据内容缩小和增大。

在不使用
的情况下，是否有一种更为雄辩的方法可以将所有框的DIV高度设置为最高框的高度？在头脑中露骨的沙发床根据里面的东西来改变高度。

下面是代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    TITLE
    <p>
Body copy 1
</p><br clear="all">
 
 
    <h1 class="tileTitle">Title 2
    <p class="tileDesc">Text text text text text text text text
</p>
 <br clear="all">
 
 
    <h1 class="tileTitle">Title 3
    <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">
  <br clear="all">
相关讨论

你应该用

1
<br style="clear: both">

因为clear属性被折旧。不过，这不是很有说服力。

实现相同目标的一个更有说服力的方法是使用一个类：

1
2
3
.clear {
  clear: both;
}

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

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

然后是"clearfix"方法，将其放在包含元素上：

1
2
3
4
5
.clearfix:after {
  content:"";
  display: table;
  clear: both;
}

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

编辑：如果你想要相同的高度，你的目标是IE10+，你可以使用flexbox。非常简单：http://learnlayout.com/flexbox.html

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

最好的方法是使用ClearFix方法：

1
2
3
4
5
6
7
8
.welcomeText:before, .welcomeText:after {
   content:"";
   display:table;
}

.welcomeText:after {
  clear:both;
}

在CSS的开头，我们使用了一个带有"clear:both"属性的DIV

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

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

但这并不是您的回答，因为您希望所有子DIV的高度与父DIV的高度相同。

你可以在父母身上使用display:table，在子女身上使用display:table-cell，但要删除float:left；

相关讨论

使用CSS(除非给出固定的高度)自动使DIV具有相同的高度是不可能的。

但是，它使用jquery(使DIV的高度相同)：

1
2
3
4
5
6
7
8
9
10
11
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);
});

如本XYKDJSFIDLE DEMO所示。

对于具有高度的浮动元素，可以使用以下CSS：

1
2
3
4
.houseTiles, .houseTiles2 {
    display:table;
    overflow:hidden;
}

这也清除了浮动，就像你对clear=all或clear:both所做的那样。

相关讨论