2

今天拿到一个作品，看到段落 格式有点奇怪<p></p>。

#product p { 
    float: left;
    width: 513px;
}

HTML 是：
观察：
- 图像每个有 270 像素，永远不会更多

<div id='product'>
    <h1>Product name</h1>
    <div class='img-product'>
        <img src='http://fakeimg.pl/270x270/' />
    </div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>           
</div>

这个 html/css 的结果是页面左侧有 270px 宽度的图像，右侧有一个空白区域。



我的问题是

只有理论，而不是实践（我知道如何解决这个问题，我只是想知道使用标签“p”是否仅针对文本，即它不应该用作块）。

正确的做法是创建一个 div，例如“描述”，并格式化它们（如定位和大小），而不是应用段落格式这样的？在 99% 的时间里，瞄准的只是文本。

我从来没有看到有人像 div 那样格式化段落，或者，我知道，是在极其特殊的情况下。因为，对我来说，段落是一个文本元素，仅此而已，所以，样式适用于字体、颜色、行高等。

对不起我的英语不好

4

3 回答 3

3

W3C 推荐HTML 4.01 规范说：

9.3.1 段落：P 元素

P 元素代表一个段落。

7.5.4 分组元素：DIV 和 SPAN 元素

DIV 和 SPAN 元素与 id 和 class 属性一起，提供了一种向文档添加结构的通用机制。这些元素将内容定义为内联 (SPAN) 或块级 (DIV)，但不会对内容强加其他表现形式。因此，作者可以将这些元素与样式表、语言属性等结合使用，以根据自己的需要和品味来定制 HTML。

例如，假设我们想要基于客户信息数据库生成 HTML 文档。由于 HTML 不包含识别“客户”、“电话号码”、“电子邮件地址”等对象的元素，因此我们使用 DIV 和 SPAN 来实现所需的结构和呈现效果。

如果您有一个实际的段落，请使用P，但如果您正在构建不是段落的内容，请使用DIVor SPAN。使用哪个元素的选择是语义的，并且应该基于内容。样式的选择是正交的，真的。您可以随意设置段落或分区的样式；它们都是块级元素。

您确实提出了一个有趣的观点，即尝试保持特定于文本的段落样式，而不是文档格式，但这只有在段落内部已经有更高级别的划分时才有可能。如果你不这样做，那将不是一个选择。我个人更喜欢更简单的结构而不是更复杂的结构，所以如果我的段落足够并且不需要在更高级别的分区中，我只需将样式放在段落上，而不是将它们包装在分区中。

于 2013-09-13T13:05:30.863 回答
0

您需要将包含图像的 div 浮动到左侧。DIV 是块级元素，除非浮动，否则不允许任何其他元素出现在它旁边。

.img-product{
    float:left;
}
于 2013-09-13T12:24:32.130 回答
0

尝试

#product p { 
    float: left;
    width: 513px;
    padding:0px;
    margin:0px;
}
于 2013-09-13T12:26:31.890 回答