在同一行显示2个DIV，其中一个是图片

Question

我有2个div，一个应在左侧，另一个在右侧，但在同一行。

后面我想要有灰色背景的父div（＃author-box），它的高度取决于正确的div文本高度，所以当您更改设备时，如果author-txt低于author-img灰色背景应该在这两个div之后。

我尝试了左浮动，但然后灰色背景是非常小，不遵循author-txt和author-img高度。

此外我尝试显示：内联，但文本从图像的下部分开始。

<div id="author-box"> 
    <div class="author-img"><img src="img.jpg" width="150px" height="149px" /></div> 
    <div class="author-txt"><strong>About the author</strong><br/>author text<br/><strong>Connect with me:</strong> <a href="#">FaceBook</a> | <a href="#" target="_blank">LinedIn</a> | <a href="#">Twitter</a></div> 
</div> 

#author-box { 
background-color: #ECECEC; 
margin-bottom: 10px; 
font-size: 15px; 
padding: 10px; 
} 
.author-img{} 
.author-img img{ 
border-radius: 100px; 
} 
.author-txt{} 

Answer 1

这很简单：（还有很多其他的方法太）

.author-img { 
    display:inline-block; 
} 

.author-txt { 
    display:inline-block; 
    vertical-align: top; 
} 

演示：http://jsfiddle.net/sem3qyyo/

如果你想使用float ING，你将需要 “清除”容器：

#author-box:after { /* just one method of clearing, there are others too */ 
    display:table; 
    clear: both; 
    content:" "; 
} 
.author-img { 
    float:left; 
} 

.author-txt { 
    float:left; 
} 

演示：http://jsfiddle.net/sem3qyyo/1/

或者使用容器上float ING和overflow: auto;如果你的设计允许它：

#author-box:after { 
    overflow: auto; /* add this */ 
    background-color: #ECECEC; 
    margin-bottom: 10px; 
    font-size: 15px; 
    padding: 10px; 
} 
.author-img { 
    float:left; 
} 

.author-txt { 
    float:left; 
} 

演示：http://jsfiddle.net/sem3qyyo/2/

这能继续下去！