Question

我正在构建一个我正在使用HTML和CSS的类的网页。

我有一个div容器，其中包含两个段落，我试图将其分为两列。

我使用float设置列。它们在创建两列时确实正确浮动，但文本的顺序错误。有蓝色标题应位于顶部，4个段落应设置为每列2。此外，每个相同的段落都放在列中，当它应该真的在另一段的列中时它是双胞胎。

我是新手，我很失落。我玩过宽度和浮动，似乎没什么用。我只需要知道我能做什么就会创建两个正确呈现文本的列。

这是我的代码。 id maincontent是主要的灰色框，然后p代表段落，h2代表标题：

#maincontent        {float: left; margin: 0px; padding: 0px; 
        width: 950px; border-left: 1pt solid #999999; 
        border-bottom: 1pt solid #999999; border-right: 1pt solid #999999;                      background-color: #E0E0E0}

#maincontent.cols   {width: 450px; float: left; margin: 5px; padding: 5px}

#maincontent p  {width: 450px; margin: 5px; float: left; padding: 5px; 
        text-align: left}

#maincontent h2 {width: 450px; float: left; color: #3280EE; font-size: 16px;                     margin: 5px; padding: 5px;     
        background: url(checkmark.jpg) no-repeat; text-align: right}

这是HTML：

<div class="cols"><!-- starts column container -->
<h2>Why Millions Turn to Us for Help</h2>
<p>Nulla eleifend consequat pharetra. Suspendisse potenti. Donec rutrum sagittis commodo. Proin <a href="#">nec massa</a> velit. Quisque volutpat, velit in sollicitudin varius, orci leo aliquet leo, ut posuere massa turpis sed erat. Duis vestibulum ipsum eu risus pretium et ullamcorper libero mattis.        </p>
<p>Maecenas sagittis ultricies congue. Nam non dui eu erat aliquam condimentum eget commodo mi. Donec vestibulum sem bibendum lectus tincidunt id rutrum quam egestas. <a href="#">Aenean ut nisi</a> dolor. In sit amet tortor sit amet leo ultrices cursus sed vel lacus. Suspendisse ultrices, sapien id condimentum condimentum.</p>

<div class="cols"><!-- starts column container -->
<h2>Why Millions Turn to Us for Help</h2>
<p>Nulla eleifend consequat pharetra. Suspendisse potenti. Donec rutrum sagittis commodo. Proin nec massa velit. Quisque volutpat, velit in sollicitudin varius, orci leo aliquet leo, ut posuere massa turpis sed erat. Duis vestibulum ipsum eu risus pretium et <a href="#">ullamcorper</a> libero mattis.        </p>
<p>Maecenas sagittis ultricies congue. Nam non dui eu erat aliquam condimentum eget commodo mi. Donec vestibulum sem bibendum lectus tincidunt id rutrum quam egestas. Aenean ut nisi dolor. In sit amet tortor sit amet leo ultrices cursus sed vel lacus. Suspendisse ultrices, sapien id condimentum condimentum.</p>
</div><!-- ends column container -->

正如我所说，有4段。由于它们在HTML中排列，您可以看到它们应该如何出现在两列中。我不熟悉jsfiddle，所以我不确定如何使用它....

Answer 1

http://jsfiddle.net/DawK5/

<html>
<head>
    <style>
        body,html{ margin:0; padding:0; }
        #maincontent{ width:950px; margin:0 auto; border:1px solid #999; }
        .cols{ float:left; width:453px; padding:5px; margin:5px; }
    </style>
</head>
<body>
<div id="maincontent">
<div class="cols">
            <h2>Heading 1</h2>
    <p>content 1</p>
</div>
<div class="cols">
            <h2>Heading 2</h2>
    <p>content 2</p>
</div>      
</div>
</body>
</html>

这有用吗？

在CSS中使用float堆叠段落的问题

1 个答案: