HTML 和 CSS 布局

Question

我已尝试对下图中的 HTML 布局进行编码，但结果似乎无法正常工作。对错误的任何帮助将不胜感激。

HTML:

    <header>
       <h1>Header</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra rutrum tem <br> por. Curabitur at rhoncus orci. Donec ante velit, scelerisque vitae tincidunt sit amet.</p>
    </header>
    <section>
       <h2>Heading</h2>
       <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
       <h2>Heading</h2>
       <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
    </section>

CSS:

body {
font-family: 'open sans';
text-align: center;
color: #333;
}

section {
display: block;
}

h1, h2 {
font-weight: 300;
}

所需的布局:

Answer 1

您应该按标题将您的部分分成两部分，以便您可以分别 float 它们:

<header>
   <h1>Header</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra rutrum tem <br> por. Curabitur at rhoncus orci. Donec ante velit, scelerisque vitae tincidunt sit amet.</p>
</header>
<section>
   <article>
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
   </article>
   <article>
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
   </article>
</section>

对于你的 CSS:

body {
    font-family: 'open sans';
    text-align: center;
    color: #333;
}

section {
    display: block;
    overflow: hidden;
}

section > article {
    box-sizing: border-box;
    float: left;
    width: 50%;
}

h1, h2 {
    font-weight: 300;
}

我推荐使用 box-sizing: border-box因为当您向 <article> 添加填充时它不会破坏布局元素。

在这里查看 fiddle - http://jsfiddle.net/teddyrised/XPGb7/