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/

HTML5部分 - 如何在此场景中进行标记和样式设置？

1 个答案: