如何将div高度缩放到相邻的div高度?

时间:2015-11-03 14:38:29

标签: html css

首先,我要说我是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%;
}

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:0)

这里的基本原则是您将包装器定义为display: table,将包含元素定义为display: table-cell。见下文:

&#13;
&#13;
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;
&#13;
&#13;

答案 1 :(得分:0)

你是说这样的意思吗? https://jsfiddle.net/ehaav5fz/

#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;
}