gpt4 book ai didi

javascript - 响应式等高div不指定高度

转载 作者:太空宇宙 更新时间:2023-11-04 12:25:50 26 4
gpt4 key购买 nike

我正在通过使用 CSS 寻找一些响应式等高 div。我不想指定高度。看起来与下图有些相似,但两个 div 都应根据另一个 div 的高度进行调整。

如果左侧 div 较长,则右侧 div 应调整为左侧 div,反之亦然。

右侧的 div 也有 2 个小的 div,它们的高度也应该相同。

仅使用 CSS 可以实现吗?还是应该使用 JS/jQuery?

Example here on the jsFiddle

img {
width: 100%;
border: 1px solid green;
}

.row {
display: table;
}

.column {
display: table-cell;
vertical-align: top;
}

.w100 {
width: 100%;
}

.w75 {
width: 75%;
}

.w50 {
width: 50%;
}

.w25 {
width: 25%;
}
<body>
<div class="row w100">
<div class="column w75">
<img src="http://placehold.it/500x500" alt="">
</div>
<div class="column w25">
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
</div>
</div>

最佳答案

你可以使用 flex-box ,例如:

.row {
display: flex;
flex-direction:row;
}

.column {
display: flex;
flex-direction:column;
}

去掉浏览器的宽度可以很好地对齐元素:
http://jsfiddle.net/2vLpx9k3/3/

您可能需要一些前缀来支持跨浏览器。

关于javascript - 响应式等高div不指定高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28020451/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com