在没有高度的 div 上使用 <br clear=all> 的 CSS 方式？ [复制]

Posted 2023-03-06

【中文标题】在没有高度的 div 上使用 <br clear=all> 的 CSS 方式？ [复制]

【英文标题】：A CSS way of using <br clear=all> on divs without heights? [duplicate]

【发布时间】：2016-04-24 21:18:42

【问题描述】：

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

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

不使用<br clear=all>，是否有更雄辩的方式将所有盒子的div高度设置为最高盒子的高度？请记住，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>

【问题讨论】：

您的意思是让所有 div 的高度相同还是只使用 clearfix 使父级成为最高 div 的高度？

你的意思是 clearfix 吗？

我在上面添加了代码。谢谢

@GT22 使用clear="all" 不会使它们的高度相同。为什么会这样？

@vsync 感谢您的无用评论。

【参考方案1】：

你应该使用

<br style="clear: both">

因为clear 属性已折旧。不过，这不是很雄辩。

实现同样事情的一个更有说服力的方法是使用一个类：

.clear 
  clear: both;

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

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

然后是“clearfix”方法，您可以将它放在包含的元素上：

.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/

【参考方案2】：

最好的办法是使用 clearfix 方法：

.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；

【讨论】：

谢谢@Arnaud-Gueras 我会试试的:)

【参考方案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 所做的那样。

【讨论】：

好像我误解了这个问题或有什么问题？任何人都可以进行改进，而不是仅仅投反对票。

你明白问题，只是我们不明白，因为问题都在谈论清除......