Question

如果仔细查看页面http://www.ribevi.com/red_wines.html

你可以注意到，第五款AMARONE葡萄酒有一些文字可以在瓶子的周围和下面。

有没有办法阻止这种情况发生并且右侧有所有文本......而不必在其中创建表格？

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

见这款酒：{{1}}

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，这决定了目的和意图（例如，您正在处理数值表，数学或其他科学），并且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>

文本“Quick brown ...”将永远以浮动元素文本的方式围绕图像。它将继续向下，始终保持图像下方的区域清晰。就像桌上的东西一样。

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>

保持文本右侧的图像

6 个答案: