Question

如何在CSS中将自己的子父元素中的两个不同div设置为相同的大小？问题类似于在同一元素中设置两个不同的div，但我不确定如何扩展它做一个较低的子元素。

我为它创建了一个显示问题的jsfiddle。我希望绿色部分扩展到与红色部分一样大（自动）。

我目前正在使用显示器灵活系统，但如果你有想法，我可以使用显示表。

＆＃34; BOX1＆＃34;应该和任何＆＃34; box2＆＃34;一样大。是（高度明智）。

<div class="outsideflex">
  <div class="leftbox">
    <div class="box1">Label 1</div>
    <div>Label 2</div>
    <div>Label 3</div>
  </div>
  <div class="rightbox">
    <div class="box2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet laoreet orci, vel vestibulum turpis gravida eget. Nam nibh enim, tristique sit amet lectus non, rhoncus tincidunt nibh. Etiam eu mi quis purus viverra mattis. Praesent malesuada, urna in vehicula tempor, lorem diam bibendum sapien, eget ornare elit diam nec ante. Proin et eros velit. Morbi congue leo et eros volutpat egestas. Proin laoreet varius luctus. Quisque quis tincidunt orci. Vestibulum lobortis congue porttitor.</div>
    <div>Value 2</div>
    <div>Value 3</div>
  </div>
</div>

示例和＆＃34;问题案例＆＃34;是我需要一列中的文本匹配另一列。可以想象它是左边的标签和右边的值。遗憾的是，这些数据并没有为我提供良好的匹配，所以我不得不依赖列出数组。

简而言之，我无法更改模板，因为每个区域都是单独循环的。

这与提出css flexbox: same height for all elements?的问题不同，因为元素是两个完全独立的元素中的子元素，而不是单个div的子元素。

Answer 1

你好吗？

我的建议是使用网格系统。我举了一个简单的例子来解释一下，我希望你能告诉我你对这个建议的看法。

.row {
	display: flex; /* equal height of the children */
}
.col {
	flex: 1; /* additionally, equal width */
}
.bg-primary {background-color: green;}
.bg-secondary {background-color: red;}

<div class="row">
	<div class="col bg-primary">
		Label 1
	</div>
	<div class="col bg-secondary">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet laoreet orci, vel vestibulum turpis gravida eget. Nam nibh enim, tristique sit amet lectus non, rhoncus tincidunt nibh. Etiam eu mi quis purus viverra mattis. Praesent malesuada, urna in vehicula tempor, lorem diam bibendum sapien, eget ornare elit diam nec ante. Proin et eros velit. Morbi congue leo et eros volutpat egestas. Proin laoreet varius luctus. Quisque quis tincidunt orci. Vestibulum lobortis congue porttitor.
	</div>
</div>
<div class="row">
	<div class="col">Label 2</div>
	<div class="col">Value 2</div>
</div>
<div class="row">
	<div class="col">Label 3</div>
	<div class="col">Value 3</div>
</div>

[例如网格系统] [1]

            [1]: http://codepen.io/CesarCEARA/pen/dvNvXP

http://codepen.io/CesarCEARA/pen/dvNvXP

此致
Cesar Barros

如何在CSS中设置两个不同div的相同高度

1 个答案: