html - 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

您应该按标题将您的部分分成两部分，以便您可以分别浮动它们：

<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>

在这里看小提琴 - http://jsfiddle.net/teddyrised/XPGb7/

Answer 2

您需要将您的部分包装成两个 div 块：

<section>
    <div>
         <h2>Heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur.
            <br>Curabitur at rhoncus orci. Lorem ipsumm.</p>
    </div>
    <div>
         <h2>Heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur.
            <br>Curabitur at rhoncus orci. Lorem ipsumm.</p>
    </div>
</section>

因此，您可以应用以下样式：

section > div {
    display: inline-block;
    width: 45%;
}

http://jsfiddle.net/samliew/8XJ7F/3/

Answer 3

将您的内容包装在左右容器中：

   <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>
      <div class="left">
       <h2>Heading</h2>
       <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
      </div>
      <div class="right">
       <h2>Heading</h2>
       <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
      </div>
    </section>

并应用以下样式

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

section {
display: block;
}

h1, h2 {
font-weight: 300;
}
.left, .right{
  width: 50%;

}
.left{
 float: left; 
}
.right {
  float: right;
}

工作示例：http: //jsbin.com/aragem/1/

Answer 4

这将起作用：

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>
          <div class="left">
           <h2>Heading</h2>
           <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
          </div>
          <div class="right">
           <h2>Heading</h2>
           <p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
          </div>
        </section>

CSS：

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

section {
display: block;
}

h1, h2 {
font-weight: 300;
}
.left, .right{
  width: 50%;

}
.left{
 float: left; 
}
.right {
  float: right;
}