保持图像

Question

的文字吧？如果你在页面http://www.ribevi.com/red_wines.html

你可以注意到，第五届酒马罗有一些文字，善有善报和瓶子图像下仔细看。

有没有办法阻止这种情况的发生，并且所有的文本都在右侧......而不必在里面创建表？

Answer 1

你只需要float（左或右）块元素（如p aragraph）内的图像：

<p> 
<img src="your-image"> 
Lorem ipsum dolor sit amet.... 
</p> 

p img { 
    float:left; 
    padding-right:10px; 
    padding-bottom:10px; 
}​ 

Demo

Answer 2

你需要用一个div container和float数据您的div改为right并给它一些宽度：

使用这些样式将数据封装在容器上div，你可以明显地使一个类的后来：

<div style="width: 320px; text-align: justify; float: right;"> 

见这酒：Montecariano Valpolicella Classico Superiore Ripasso

My Fiddle

Answer 3

在这里，我做了什么，他们建议，但很明显，你将需要改变的值。

http://jsfiddle.net/sXj2N/

Answer 4

最快的解决办法是设置下边距的图像上，以防止文本下下去。

更新：

.tdCell img, .image { 
    display: block; 
    float: left; 
    height: 400px; 
    padding-right: 20px; 
    vertical-align: middle; 
    width: 120px; 
    margin-bottom: 30px; 
} 

Answer 5

你并不需要创建表，标记和样式的神会亲切的眼光来看待你，如果你说，只要使用display: table-cell CSS语句。它会做你想做的，至少它是完美的现代和有效的方法之一。请记住，您的标记中有TABLE s，它决定了目的和意图（例如，您正在处理数值表，例如数学表或其他科学表），并且您的标记具有table-cell样式以使您的内容具有看看就像表一样。换句话说，在HTML + CSS世界中，如果某件事物可能类似于您设备上的表格，那么它就不会成为表格。质疑那些会让你相信桌子不好的人 - 他们本身并不坏。有什么不好的是将TABLE标签放入他们不属于的文档中。让我们面对现实吧，平均约有5％的网站需要我们的表格。然而，使用表格式渲染来设置页面样式非常好。

<div style="height: 100%;"><!-- the children of this element will automatically occupy its entire height, courtesy of 'table-cell' rule. --> 
    <div style="display: table-cell"> 
     <img src="example.png" /> 
    </div> 
    <div style="display: table-cell"> 
     Quick brown fox jumps over the lazy dog. 
     <!-- Wall of text follows... --> 
    </div> 
</div> 

文本“快速褐色......”将从未围绕图像的方式浮动元素有文字做。它会简单地继续向下，随时保持图像下的区域清晰。像表中的东西一样。

Answer 6

<div style="width:600px; float:left; height:auto;"> 
<div style="float:left; width:200px; background-color:red; display: table-cell">left container</div> 
<div style="float:left; width:200px; background-color:Green; display: table-cell">Mind container</div> 
<div style="float:left; width:200px; background-color:Black; display: table-cell">right container</div> 

</div>