0

我有九个这样的 div：

<div id="content">
    <div class="example">
        <h2>Lorem ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    </div>
</div>

如图所示如何排列它们？（css）

在此处输入图像描述

4

4 回答 4

2

演示

像这样：

#content {
  width:800px; /* adjust width to accommodate three colums */
  /* your other styles */
}

.example {
  width: 150px;  /* adjust width */
  float:left;
}

.clear{ clear:both; }

您应该width根据需要调整容器和 9 个 div。

在每组三个 div 之后，您应该使用一个 div clear:both（或在 google 上搜索clearfix作为替代），如下所示：

<div class="clear"></div>
于 2013-06-01T20:33:08.463 回答
2

您可以通过两种方式进行操作，第一种...

利用display: inline-block;

演示

.wrap {
    width: 950px;
}

#content {
    display: inline-block; /* Can also use floats, depends on you */
    width: 300px;
}

2nd using column-countproperty（这还没有被广泛支持）

Demo（Demo可能看起来有点怪，需要用到CSS reset）

.wrap {
    column-count: 3; /* This will cut your content in 3 pieces */
    -moz-column-count: 3;
    -webkit-column-count: 3;
}
于 2013-06-01T20:34:02.287 回答
0

就像是...

HTML

<div class="left">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>

<div class="middle">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>

<div class="right">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>

<div class="clear"></div>

CSS：

.left{
   float: left;
   width: 33%;
}
.middle{
   width: 33%;
}
.right{
   float: right;
   width: 33%;
}
.clear{
   clear:both;
}

希望这可以帮助？:)

于 2013-06-01T20:36:17.110 回答
0

这将取决于您希望内容的宽度，但我会将内容制作成一个类，制作 3 个内容 div，并在每个中放置 3 个示例 div。然后，只需在示例 div 上设置 %age 宽度并将它们向左浮动。这是一个要演示的jsfiddle。

CSS：

.example {
    width: 33.33333%;
    float: left;
}

标记：

<div class="content">
    <div class="example">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    </div>
    <div class="example">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    </div>
    <div class="example">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    </div>
</div>
于 2013-06-01T20:42:50.147 回答