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，则需要“清除”容器：

#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和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/

这可以继续！

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

1 个答案: