在同一行显示2个DIV,其中一个是图片
问题描述:
我有2个div,一个应在左侧,另一个在右侧,但在同一行。在同一行显示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{}
答
这很简单:(还有很多其他的方法太)
.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/
这能继续下去!
+1思考所有“其他方式”往往阻止我发布答案。 – 2014-10-08 21:15:32
非常感谢你:) – user2080812 2014-10-08 21:22:14
@HashemQolami对! – Arbel 2014-10-08 21:22:29