0

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

您会注意到第 5 款 AMARONE 酒在瓶身图像周围和下方有一些文字。

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

4

6 回答 6

1

您只需要float（向左或向右）块元素内的图像（如paragraph）：

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

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

演示

于 2012-10-04T07:52:12.503 回答
1

您需要将数据包装在 adiv container和float您的divto 中，right并为其提供一些宽度：

在容器上使用这些样式包装您的数据div，您显然可以稍后创建一个类：

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

见此酒：Montecariano Valpolicella Classico Superiore Ripasso

我的小提琴

于 2012-10-04T07:57:47.410 回答
0

在这里，我按照他们的建议做了，但显然您需要更改这些值。

http://jsfiddle.net/sXj2N/

于 2012-10-04T08:01:53.283 回答
0 
<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>
于 2012-10-04T09:21:10.820 回答
0

您不需要创建表格，如果您说，只需使用display: table-cellCSS 语句，标记和样式表之神就会眷顾您。它会做你想做的事，至少它是一种非常现代且有效的方法。请记住，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>

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

于 2012-10-04T09:02:41.453 回答
0

最快的解决方案是在图像上设置一个 margin-bottom 以防止文本低于它。

更新：

.tdCell img, .image {
    display: block;
    float: left;
    height: 400px;
    padding-right: 20px;
    vertical-align: middle;
    width: 120px;
    margin-bottom: 30px;
}
于 2012-10-04T08:47:58.290 回答