Question

我有一个简单的内容块：

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

我希望'公司名称'和'地址'分开。

现在我有几种选择：

制作额外的<div>，在 和代码之间添加代码，也许还有其他一些解决方案。添加此类功能的正确方法是什么？

Answer 1

你应该做一些语义上最有意义的事情。通常，div标记用于表示页面中的某种DIVision。如果您只是列出一个地址，那么这样做是没有意义的。我个人会在行尾添加一个 ，它会添加一个换行符，而不会对你的内容做任何语义陈述。

Answer 2

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

div em {display:block}

或

div em {float:left;clear:both}

无论哪种方式，地址都会中断，您不必触摸HTML。

Answer 3

有很多选择。

<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>

等等，包括列出的变体。

Answer 4

以下CSS将起到作用：

span.colored-text{ display:block; }

Answer 5

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

Answer 6

Possiblity 1（不含CSS）： http://jsfiddle.net/mnnLG/1/

使用 跳转到新行。

Possiblity 2（使用CSS）： http://jsfiddle.net/mnnLG/2/

使用display:block CSS使内联元素成为块属性。

替代可能性：

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

在单独的行上显示内联内容

6 个答案: