我有两个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>
当前回答
CSS网格方式
这样做的现代方法(这也避免了必须在每两个项目周围声明一个<div class="row"></div>-包装器)将使用CSS网格。这也使您可以轻松控制项目行/列之间的间隙。
.grid-container { display: grid; grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */ grid-row-gap: 10px; grid-column-gap: 10px; } .grid-item { background-color: #f8f8f8; box-shadow: 0 0 3px #666; text-align: center; } .grid-item img { max-width: 100%; } <div class="grid-container"> <div class="grid-item">1 <br />1.1<br />1.1.1</div> <div class="grid-item">2</div> <div class="grid-item">3 <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" /> 3.1 </div> <div class="grid-item">4</div> <div class="grid-item">5 <br />1.1<br />1.1.1</div> <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" /> 6.1</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9 <br />1.1<br />1.1.1</div> <div class="grid-item">10</div> <div class="grid-item">11 <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" /> 11.1 </div> <div class="grid-item">12</div> </div>
其他回答
你可以使用Jquery的等高插件来完成，这个插件使所有的div的高度完全相同。如果其中一个生长了，其他的也会生长。
下面是一个实现示例
Usage: $(object).equalHeights([minHeight], [maxHeight]);
Example 1: $(".cols").equalHeights();
Sets all columns to the same height.
Example 2: $(".cols").equalHeights(400);
Sets all cols to at least 400px tall.
Example 3: $(".cols").equalHeights(100,300);
Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.
这是链接
http://www.cssnewbie.com/equalheights-jquery-plugin/
这是CSS从未真正有过任何解决方案的领域——你只能使用<table>标记(或使用CSS display:table* values伪造它们)，因为这是唯一实现“保持一堆元素相同高度”的地方。
< span style=" font - family:宋体;"> < span style=" font - family:宋体;"显示:表格单元;" > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > 一些内容!< br / > < / div > < span style=" font - family:宋体;"显示:表格单元;" > 一些内容! < / div > < / div >
这适用于所有版本的Firefox, Chrome和Safari，至少版本8的Opera，以及版本8的IE。
var numexcute = 0;
var interval;
$(document).bind('click', function () {
interval = setInterval(function () {
if (numexcute >= 20) {
clearInterval(interval);
numexcute = 0;
}
$('#leftpane').css('height', 'auto');
$('#rightpane').css('height', 'auto');
if ($('#leftpane').height() < $('#rightpane').height())
$('#leftpane').height($('#rightpane').height());
if ($('#leftpane').height() > $('#rightpane').height())
$('#rightpane').height($('#leftpane').height());
numexcute++;
}, 10);
});
如果你不介意其中一个divs是一个主人，并口述两个divs的高度，有这个:
小提琴
无论如何，右边的div会扩展或压缩&溢出来匹配左边的div的高度。
两个div都必须是容器的直接子节点，并且必须在容器中指定它们的宽度。
相关的CSS:
.container {
background-color: gray;
display: table;
width: 70%;
position:relative;
}
.container .left{
background-color: tomato;
width: 35%;
}
.container .right{
position:absolute;
top:0px;
left:35%;
background-color: orange;
width: 65%;
height:100%;
overflow-y: auto;
}
我最近遇到了这个问题，我不太喜欢这个解决方案，所以我尝试了一下。
.mydivclass {inline-block;vertical-align:中间;宽度:33%;}
