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

Question

首先，让我说我对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%; 
} 

任何帮助大量的赞赏。

Answer 1

这里的基本原则是，你定义你的包装为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;; 
 
}

<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>

Answer 2

你的意思是这样？ 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; 
}