Question

我只想使用CSS来寻找一些响应相等的高度div。我不想指定高度。看起来有点类似于下面的图像，但两个div应根据其他div高度进行调整。

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

右侧div也有2个小div，也应该是相同的高度。

这可以仅使用CSS实现吗？或者我应该使用JS / jQuery？

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>

Answer 1

您可以使用flex-box，例如：

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

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

除了宽度之外，浏览器在调整项目方面做得很好：
http://jsfiddle.net/2vLpx9k3/3/

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

Answer 2

我做了一些你可能正在寻找的东西。

http://jsfiddle.net/2vLpx9k3/4/

它根据外部元素调整内部元素的高度和。

HTML：

<div class="outer">
    <div class="left">
        <div class="right"></div>
        <div class="right bottom"></div>
    </div>
</div>

CSS：

.outer {
    height: 100vh;
}

.left {
    background-color: red;
    width: 100%;
    height: 100%;
    margin-right: 50%;
}

.right {
    background-color: green;
    height: 50%;
    margin-left: 50%;
}

.right.bottom {
    background-color: black;
}

响应等于高度div而不指定高度

2 个答案: