使用CSS,当没有设置左侧或右侧的高度时,如何用<div>
扩展/填充左右两个<div>
的<div>
高度(由background-color
确定)。正确的<div>
。
根据提供的数据量,左侧的<div>
可以为任意高度。
我尝试了height: 100%
,但这不起作用。
我必须使用float属性-所以我不能使用table / table-cell属性。
我已经读过这个post来扩展宽度,但是上面的答案有一个定义的高度值。所有其他示例似乎都具有定义的高度值。
这是我的HTML代码:
<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>
这是我的CSS代码:
.wrapper {
width:100%;
height:100%;
border:1px solid;
}
.photo {
height: 100%;
background:blue;
float:right;
vertical-align:top;
text-align:center;
padding:2px;
}
.photo_dimensions {
max-height: 149px;
max-width: 149px;
}
.details {
width:auto;
height:auto;
background:red;
overflow:hidden;
vertical-align:top;
text-align:left;
}
这是我目前拥有的视觉显示:
最佳答案
如果只需要扩展背景,则将其设置为.wrapper
。
JsFiddle Demo
.wrapper {
background: yellow;
overflow: auto;
}
.photo {
float: right;
}
.details {
background: pink;
overflow: auto;
}
<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>
关于html - 扩展div高度以匹配其他高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30792937/