0

いくつかの情報を含むセクションがあるこのレイアウトを提供してきました。ただし、視覚的には、そのセクションには画面幅 100% の行がいくつかありますが、コンテンツは 70% しかありません。

スタイルは明確にするためにインラインであり、次のように提案されています。

質問 1 - これは許容できるマークアップですか?

<section>
  <div class="row-red" style="width=100%; background-color: red;">
    <h1 style="width:70%">section header here</h1>
    <p style="width:70%">paragraph 1</p>
  </div>
  <div class="row-blue" style="width: 100%; background-color: blue;">
    <p style="width:70%">paragraph 2</p> 
  </div>
</section>

前もって感謝します

最初にここに書いたフィドルからの例を次に示します。

http://jsfiddle.net/gSLww/9/

4

1 に答える 1

0

はい、それは受け入れ可能なマークアップですが、CSS で作業する必要があるのはあなただけです。次のように書きます。

.row-red,.row-blue{
    padding-right:30%
}

HTML

<section>
  <div class="row-red" style="background-color: red;">
    <h1>section header here</h1>
    <p>paragraph 1</p>
  </div>
  <div class="row-blue" style="background-color: blue;">
    <p>paragraph 2</p>
  </div>
</section>

これをチェックしてくださいhttp://jsfiddle.net/gSLww/15/

于 2012-09-21T12:01:32.220 に答える