首先,我要说我是HTML和CSS的新手。到目前为止,我有一个包含div的内部有两个div,一个向左浮动,一个向右浮动。向右浮动的图像包含400px
图像,向左浮动的图像应包含一些文本,但我希望背景color
的高度保持与图像相同的高度。因为图像是按百分比而不是像素高度来定义的,所以我不能将高度设置为与它不会缩放相同的高度。
这是HTML:
<div id="about">
<div id="abouttext">
djfd
</div>
<div id="aboutpic">
<img src="images/photoph.png" alt="Yeah, that's me">
</div>
</div>
以下是相关的CSS:
#about
{
width: 70%;
height: auto;
margin: 0 auto;
}
#aboutpic
{
width: 40%;
float: right;
}
#abouttext
{
width: 50%;
background-color: #2A1F33;
opacity: 0.6;
height: auto;
float: left;
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
}
非常感谢任何帮助。
答案 0 :(得分:0)
这里的基本原则是您将包装器定义为display: table
,将包含元素定义为display: table-cell
。见下文:
img {
width: 100%;
}
#about {
width: 100%;
height: auto;
margin: 0 auto;
display: table;
}
#aboutpic {
background-color: blue;
width: 45%;
display: table-cell;
}
#abouttext {
color: white;
width: 45%;
background-color: #2A1F33;
display: table-cell;;
}
&#13;
<div id="about">
<div id="abouttext">djfd</div>
<div id="aboutpic">
<img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg" alt="Yeah, that's not me" />
</div>
</div>
&#13;
答案 1 :(得分:0)
#about
{
width: 70%;
height: auto;
margin: 0 auto;
display: flex;
}
#aboutpic
{
width: 40%;
float: right;
}
#abouttext
{
width: 50%;
background-color: #2A1F33;
opacity: 0.6;
float: left;
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
}
img {
height: 400px;
width: 100%;
display: block;
}