我有两个div元素并排。我希望它们的高度是相同的，并保持不变，如果其中一个调整大小。如果其中一个增长是因为放入了文本，那么另一个也应该增长以匹配高度。不过我还是搞不懂这个。什么好主意吗?
<div style="overflow: hidden"> <div style=" border: 1px solid #cccccc; float: left; padding-bottom: 1000px; margin-bottom: -1000px; "> Some content!<br /> Some content!<br /> Some content!<br /> Some content!<br /> Some content!<br /> </div> <div style=" border: 1px solid #cccccc; float: left; padding-bottom: 1000px; margin-bottom: -1000px; "> Some content! </div> </div>
当前回答
小提琴
HTML
<div class="container">
<div class="left-column">
</div>
<div class="right-column">
<h1>Hello Kitty!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
</div>
</div>
CSS
.container {
float: left;
width: 100%;
background-color: black;
position: relative;
left: 0;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.left-column {
float: left;
width: 30%;
height: 100%;
position: absolute;
background: wheat;
}
.right-column {
float: right;
width: 70%;
position: relative;
padding: 0;
margin: 0;
background: rebeccapurple;
}
其他回答
这是一个很多人都遇到过的常见问题，但幸运的是，一些聪明的人，如埃德·艾略特在他的博客上，已经在网上发布了他们的解决方案。
基本上你要做的就是通过添加padding-bottom: 100%使两个div /column都非常高，然后使用margin-bottom: -100%“欺骗浏览器”认为它们没有那么高。埃德·艾略特在他的博客上有更好的解释，其中也有很多例子。
.container { 溢出:隐藏; ｝ .column { 浮:左; 保证金:20 px; 背景颜色:灰色; padding-bottom: 100%; margin-bottom: -100%; ｝ < div class = "容器" > < div class = "列" > 一些内容!< br > 一些内容!< br > 一些内容!< br > 一些内容!< br > 一些内容!< br > < / div > < div class = "列" > 某物 < / div > < / div >
<div>
<div style="border:1px solid #cccccc; float:left; min-height:200px;">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; min-height:200px;">
Some content!
</div>
</div>
我在这里所做的是将高度更改为min-height，并给它一个固定的值。如果其中一个被调整大小，另一个将保持相同的高度。不知道这是不是你想要的
小提琴
HTML
<div class="container">
<div class="left-column">
</div>
<div class="right-column">
<h1>Hello Kitty!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
</div>
</div>
CSS
.container {
float: left;
width: 100%;
background-color: black;
position: relative;
left: 0;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.left-column {
float: left;
width: 30%;
height: 100%;
position: absolute;
background: wheat;
}
.right-column {
float: right;
width: 70%;
position: relative;
padding: 0;
margin: 0;
background: rebeccapurple;
}
我喜欢使用伪元素来实现这一点。你可以使用它作为内容的背景，让它们填充空间。
使用这些方法，您可以设置列之间的边距，边框等。
.wrapper{ position: relative; width: 200px; } .wrapper:before, .wrapper:after{ content: ""; display: block; height: 100%; width: 40%; border: 2px solid blue; position: absolute; top: 0; } .wrapper:before{ left: 0; background-color: red; } .wrapper:after{ right: 0; background-color: green; } .div1, .div2{ width: 40%; display: inline-block; position: relative; z-index: 1; } .div1{ margin-right: 20%; } <div class="wrapper"> <div class="div1">Content Content Content Content Content Content Content Content Content </div><div class="div2">Other</div> </div>
我只是想添加到Pavlo描述的伟大的Flexbox解决方案，在我的情况下，我有两个列表/列的数据，我想并排显示之间只有一点间距，水平居中封闭的div.通过在第一个(最左边)flex:1 div内嵌套另一个div，并将其浮动在右边，我得到了我想要的。我找不到任何其他方法来做到这一点，并在所有视口宽度上取得一致的成功:
<div style="display: flex;">
<div style="flex: 1; padding-right: 15px;">
<div style="float: right">
<!-- My Left-hand side list of stuff -->
</div>
</div>
<div style="flex: 1; padding-left: 15px;">
<!-- My Right-hand side list of stuff -->
</div>
</div>
