Question

使用CSS，如何扩展/填充右侧和右侧的var x = 5; function a() { function b() { console.log(x); } b(); x = 6; // remove `var` } a();高度没有高度设置为左侧或右侧<div>时，<div> （由<div>确定，具有更高的高度）与background-color一致

根据提供的数据量，左<div>可以是任何高度。

我尝试了<div>，但这不起作用。

我必须使用float属性 - 所以我不能使用table / table-cell属性。

我已阅读此post扩展宽度，但已加入的答案具有已定义的高度值。所有其他示例似乎都有一个已定义的高度值。

这是我的HTML代码：

height: 100%

这是我的CSS代码：

<div class="wrapper">
    <div class="photo">
        //image has max-height: 149px & max-width: 149px; assigned in the css file
        <img class="photo_dimensions" src="{{ name_details_photograph_url }}" />
    </div>
    <div class="details">
        Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />
    </div>
</div>

以下是我目前所拥有的视觉显示：

enter image description here

Answer 1

您可以使用非表格元素模拟表格布局：

./webroot

这样包装的div就像是具有相同高度的表格单元格。

Answer 2

如果您只需要展开背景，请改为将其设置为.wrapper。

JsFiddle Demo

＆＃13;

.wrapper {
    background: yellow;
    overflow: auto;
}
.photo {
    float: right;
}
.details {
    background: pink;
    overflow: auto;
}

＆＃13;

<div class="wrapper">
    <div class="photo">
        <img src="//dummyimage.com/100"/>
    </div>
    <div class="details">
        Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q
    </div>
</div>

＆＃13;

Answer 3

让.wrapper拥有position: relative。

相关：How to make a floated div 100% height of its parent?

Answer 4

更新

以重新定义.wrapper高度以使用jQuery从.details继承值 更新了jsfiddle：http://jsfiddle.net/0doo7L6L/1/

这是你正在寻找的吗？你必须为html和amp;定义一个高度。身高100％继承一个值

<div style="display:table">
    <div style="display:table-cell"></div>
    <div style="display:table-cell"></div>
</div>

http://jsfiddle.net/0doo7L6L/

Answer 5

你需要使用静态高度div高度。请尝试按照更新的代码。

<!DOCTYPE html>

.wrapper { 宽度：100％; 高度：100％; 边框：1px固体; } .photo { 身高：150px; 背景：蓝色; 浮动：权利; 垂直对齐：顶部; 文本对齐：中心; 填充：2px的; } .photo1 { 身高：150px; 背景：红色; 向左飘浮; 垂直对齐：顶部; 文本对齐：中心; 填充：2px的; }

.photo_dimensions { 最大高度：149px; 最大宽度：149px; } 。细节 { 宽度：汽车; 高度：自动; 背景：红色; 溢出：隐藏; 垂直对齐：顶部; 文本对齐：左; }

//图片有max-height：149px＆amp;最大宽度：149px;在css文件中分配 Q
Q
Q
Q
Q
Q
Q
Q

</body>

右边我们考虑2 Div 1）全高＆amp;宽度并设置背景。 2）将照片及其子DIV放在第一个。

展开div高度以匹配另一个

5 个答案: