css - HTML5 部分 - 如何在这种情况下标记和样式？

Question

我已经在我有一个部分的地方给出了这个布局，其中包含一些信息。然而，在视觉上，该部分有一些行横跨 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/

Answer 1

是的，这是一个可以接受的标记，但只有你必须处理它的 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/