基本上这就是我得到的......
虽然这是我想要的。
我的图片高度和宽度是这样设置的...
#content img{
padding: 3%;
width: 60%;
height: 50%;
float: left;
}
使用 %s 是因为我希望它响应迅速。所以我真的不能说出图像的确切高度(以 px 为单位)。
当我尝试为灰色框设置相同的尺寸时,它只会填满其中的内容,如您所见。
#text{
padding: 3%;
margin-right: 3%;
margin-top: 3%;
width: 37%;
height: 50%;
float: left;
background-color: #333333;
color: #FFFFFF;
}
关于如何解决这个问题?我也开始认为问题可能是我试图让它响应不正确。
提前致谢。
编辑:这是 HTML
<div id="content">
<img src="projectphotos/1.jpg">
<span class="arrows" style="float: right;"><i class="fa fa-angle-`double-right fa-3x"></i></span>`
<div id="text">
Test
</div>
</div>
最佳答案
你可以使用Flexbox
body, html {margin: 0; padding: 0}
.content {
display: flex;
}
.text {
background: #333333;
color: white;
flex: 1;
margin: 10px;
}
.image {
flex: 2;
margin: 10px;
}
img {
width: 100%;
vertical-align: top;
}
<div class="content">
<div class="image">
<img src="http://placehold.it/900x450">
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, id.</div>
</div>
关于html - 将div设置为与图像相同的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37214072/