1

コンテンツを含む単純なブロックがあります。

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

「会社名」と「住所」を別々の行に配置したい。

そして今、私はいくつかのオプションを利用できます：

追加<div>のsを作成し、タグと<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/

CSSを使用display:blockしてインライン要素にブロック属性を取得させます。

代替の可能性：

各要素をブロックタイプの要素でラップします。ul/ol->li組み合わせ、または単純なdiv要素にすることができます。

于 2013-02-06T15:51:31.477 に答える