具有不同高度块的响应式 3 列布局答案

【问题标题】：Responsive 3 columns layout with different height blocks具有不同高度块的响应式 3 列布局
【发布时间】：2026-02-09 19:10:01
【问题描述】：

我想构建一个响应式的 3 列布局。对于大屏幕，我有 3 列，中型屏幕减少到 2 列，小屏幕减少到 1 列。块包含文本，因此它们具有不同的高度。我的目标是创建一行与顶部对齐的块（此插图指的是 3 列布局，但原则也适用于 2 列）。

但我最好的结果如下

完全不同，是的。我认为问题在于我无法创建块的虚拟“线”，我可以将 1-2-3 和 4-5-6 对齐到顶部。这是我的代码（我没有在 jsfiddle 上发布它，因为在宽屏幕上效果会更好）。

HTML

<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>

<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>

<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

CSS

.span3 {
    float:left;
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align:left;
    border:1px solid;
}

@media only screen and (min-width:951px)
{
    .span3 {
        width:31%;
        margin-left:3.5%;
    }

    .span3:nth-child(3n+1) {
        margin-left:0%;
    }
}

@media only screen and (min-width:501px) and (max-width:950px)
{
    .span3 {
        width:48%;
        margin-left:4%;
    }

    .span3:nth-child(odd) {
        margin-left:0%;
    }
}

@media only screen and (max-width:500px) 
{
    .span3 {
        width:100%;
        margin-left:0%;
    }
}

有人可以帮忙吗？提前致谢。

注意我知道有很多框架具有此功能（例如 question），但如果可能的话，我更愿意保留自己的代码。

【问题讨论】：

标签： css layout responsive-design

【解决方案1】：

在 Bootstrap 2.x 中，您可以这样做..

<div class="row">
  <div class="span4">
  <b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </div>

  <div class="span4">
  <b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
  </div>

  <div class="span4">
  <b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

  <div class="clearfix"></div>

  <div class="span4">
  <b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </div>

  <div class="span4">
  <b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
  </div>

  <div class="span4">
  <b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

演示：http://www.bootply.com/120857

【讨论】：

感谢您的回答，但如果可能的话，我想避免使用框架。

【解决方案2】：

我在每一行中放置了一个行类。这是代码

<div class="row">
    <div class="span3"></div>
    <div class="span3"></div>
    <div class="span3"></div>
</div>

并将其向左浮动并放置边距按钮

完整的代码在这里

http://jsfiddle.net/ndEUS/

【讨论】：

我不能这样做，因为当我有 2 列时，这个 3 块结构不再有效。在 2 列布局中，我应该对齐 1-2 和 3-4 和 5-6，这在您的结构中是无法实现的。无论如何，谢谢。

【解决方案3】：

现在，如果你使用 3 次 clear：两者都可以，但我不知道为什么需要在那里使用 3 次。 http://jsfiddle.net/LmPwe/

<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>

<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div style="clear:both;"></div><div style="clear:both;"></div><div style="clear:both;"></div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>

<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

【讨论】：

【解决方案4】：

找出答案！超级简单有效。

CSS

.span3 {
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align:top;
    margin-right:-4px;
    border:1px solid;
}

@media only screen and (min-width:951px)
{
    .span3 {
        width:33.3%;
    }
}

@media only screen and (min-width:501px) and (max-width:950px)
{
    .span3 {
        width:50%;
    }
}

@media only screen and (max-width:500px) 
{
    .span3{
        width:100%;
    }
}

希望它可以帮助某人。

【讨论】：