1

我有一个简单的内容块：

<div>
    <img src="/img/sample.png" alt="Sample image">
    <span class="colored-text">Company name</span>
    <em>Address</em>
</div>

我希望“公司名称”和“地址”位于不同的行。

现在我有几个可用的选项：

制作额外<div>的 s，在and<br/>标签之间添加标签，也许还有其他一些解决方案。添加此类功能的正确方法是什么？<span><em>

4

6 回答 6

8

你应该做在语义上最有意义的事情。通常，div标签旨在表示页面中的某种 DIVision。如果您只是列出一个地址，那么这样做是没有意义的。我个人会<br />在行尾使用 a 来添加换行符，而不会对您的内容做出任何语义声明。

于 2013-02-06T15:28:13.487 回答
4

您只能使用 CSS 并使em标签在自己的行中中断：

div em {display:block}

或者

div em {float:left;clear:both}

无论哪种方式，地址都会断线，您不必触摸您的HTML.

于 2013-02-06T15:39:30.293 回答
1

有多种选择。

<div>
    <img src="/img/sample.png" alt="Sample image">
    <span class="colored-text">Company name</span>
    <br />
    <em>Address</em>
</div>

或者

<div>
    <img src="/img/sample.png" alt="Sample image">
    <p class="colored-text">Company name</p>
    <p><em>Address</em></p>
</div>

或者

<ul>
        <li><img src="/img/sample.png" alt="Sample image">
        <span class="colored-text">Company name</span></li>
        <li><em>Address</em></li>
    </ul>

还有更多，包括列出的变体。

于 2013-02-06T15:30:59.487 回答
0

遵循 CSS 可以解决问题：

span.colored-text{ display:block; }
于 2013-02-06T15:31:20.400 回答
0

在每行的末尾添加一个中断。

于 2013-02-06T15:32:30.607 回答
0

可能性 1（没有 CSS）：http: //jsfiddle.net/mnnLG/1/

用于跳到<br />新行。

可能性 2（使用 CSS）：http: //jsfiddle.net/mnnLG/2/

使用display:blockCSS 使内联元素具有块属性。

另一种可能性：

用块类型元素包装每个元素。它可以是ul/ol->li组合，也可以是一个简单的div元素。

于 2013-02-06T15:51:31.477 回答