使用浮动

Question

我正在尝试创建一行高度相等的子元素。但是，children元素包含可变高度的图像，因此高度应该是最高元素的高度。想象一下：

<div class="parent">
    <div class="child"><img /></div>
    <div class="child"><img /></div>
    <div class="child"><img /></div>
    <div class="child"><img /></div>
</div>

这是CSS：

.child {float:left;width:25%}

我知道这可以用javascript完成。然而，这对我来说是不可能的（至少我是这么认为的），因为这是整体响应式设计的一部分，因此儿童的宽度设置为25％，将随着屏幕尺寸的不同而变化，例如50％

先谢谢！

Answer 1

在传统的文档流程中，父母要么根据孩子的大小，要么根据他们的大小确定，他们通常不能同时做这两件事。

没有flexbox。如果您处理现代浏览器要求，它就是您需要的解决方案。 http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback是如何进行这些类型分析的一个很好的例子。

Answer 2

如果您希望这些子元素具有相同的高度

，请设置子高度

.child {float:left;width:25%; height: 100px; display: block;}

在.child

中设置img的max-height

.child img {max-height: 100px;}

Answer 3

嘿，现在尝试这个

 *{box-sizing:border-box;}    
.parent{
display:table;
  width:100%;
  background:red;
 padding:5px;
}
.child{
display:table-cell;
  background:blue;
  width:25%;
}
   .child + .child{border-left: 5px solid red;}

<div class="parent">
    <div class="child">demo </div>
    <div class="child">text <br/>demo text</div>
    <div class="child"></div>
    <div class="child">hello <br/>hello<br/></div>
</div>