Html CSS Float：将图像浮动到文本的左侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5198392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Float: Floating an image to the left of the text
提问by Cris
For each post box, I want the thumbnail to float to the left and the text to float to the right. I do not want the thumb to wrap around the text.
对于每个邮箱，我希望缩略图向左浮动，文本向右浮动。我不希望拇指环绕文本。
Here is my html code:
这是我的 html 代码：
<div class="post-container">
<div class="post-thumb"><img src="thumb.jpg" /></div>
<div class="post-title">Post title</div>
<div class="post-content"><p>post description description description etc etc etc</p></div>
</div>
I've tried a few ways and still can't get it to work... the text won't show on the right...
我已经尝试了几种方法，但仍然无法使其正常工作......文本不会显示在右侧......
Here's my CSS code:
这是我的 CSS 代码：
.post-container{
margin: 20px 20px 0 0;
border:5px solid #333;
}
.post-thumb img {
float: left;
clear:left;
}
.post-content {
float:right;
}
回答by thirtydot
Is this what you're after?
这是你追求的吗？
- I changed your title into a
h3(header) tag, because it's a more semantic choice than using adiv.
- 我将您的标题更改为
h3(header) 标签，因为它比使用div.
Live Demo #1
Live Demo #2(with header at top, not sure if you wanted that)
现场演示 #1
现场演示 #2（顶部有标题，不确定您是否想要）
HTML:
HTML：
<div class="post-container">
<div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
<div class="post-content">
<h3 class="post-title">Post title</h3>
<p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p>
</div>
</div>
CSS:
CSS：
.post-container {
margin: 20px 20px 0 0;
border: 5px solid #333;
overflow: auto
}
.post-thumb {
float: left
}
.post-thumb img {
display: block
}
.post-content {
margin-left: 210px
}
.post-title {
font-weight: bold;
font-size: 200%
}
回答by Demelziraptor
Just need to float both elements left:
只需要向左浮动两个元素：
.post-container{
margin: 20px 20px 0 0;
border:5px solid #333;
}
.post-thumb img {
float: left;
}
.post-content {
float: left;
}
Edit: actually, you do not need the width, just float both left
编辑：实际上，您不需要宽度，只需向左浮动
回答by dmackerman
.post-container{
margin: 20px 20px 0 0;
border:5px solid #333;
width:600px;
overflow:hidden;
}
.post-thumb img {
float: left;
clear:left;
width:50px;
height:50px;
border:1px solid red;
}
.post-title {
float:left;
margin-left:10px;
}
.post-content {
float:right;
}<div class="post-container">
<div class="post-thumb"><img src="thumb.jpg" /></div>
<div class="post-title">Post title</div>
<div class="post-content"><p>post description description description etc etc etc</p></div>
</div>回答by Dutchie432
Check out this sample: http://jsfiddle.net/Epgvc/1/
查看此示例：http: //jsfiddle.net/Epgvc/1/
I just floated the title to the left and added a clear:bothdiv to the bottom..
我只是将标题浮动到左侧并clear:both在底部添加了一个div..
回答by Optimator
I almost always just use overflow:hidden on my text-elements in those situations, it often works like a charm ;)
在这些情况下，我几乎总是只使用溢出：隐藏在我的文本元素上，它通常就像一个魅力;)
.post-container {
margin: 20px 20px 0 0;
border:5px solid #333;
}
.post-thumb img {
float: left;
}
.post-content {
overflow:hidden;
}
回答by Dmitry Kulahin
Solution using display: flex(with responsive behavior): http://jsfiddle.net/dkulahin/w3472kct
使用显示的解决方案：flex（具有响应行为）：http: //jsfiddle.net/dkulahin/w3472kct
HTML:
HTML：
<div class="content">
<img src="myimage.jpg" alt="" />
<div class="details">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
CSS:
CSS：
.content{
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.content img {
width: 150px;
}
.details {
width: calc(100% - 150px);
}
@media only screen and (max-width: 480px) {
.content {
flex-direction: column;
}
.details {
width: 100%;
}
}
回答by quarkdown27
Set the width of post-content and post-thumb so that you get a two-column layout.
设置 post-content 和 post-thumb 的宽度，以便获得两列布局。
