0

我正在为我正在学习的 HTML 和 CSS 课程构建一个网页。

我有一个 div 容器，其中包含两个段落，我试图将它们移动到两列中。

我使用浮点数设置列。他们确实在创建两列时正确浮动，但是文本的顺序都错误。顶部有蓝色标题，每列有 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不熟悉，所以我不确定如何使用它....

4

1 回答 1

0

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>

这行得通吗？

于 2011-07-16T03:43:10.860 回答