Question

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

My goal

但我最好的结果是以下

My best result

非常不同，是的。我认为问题在于我无法创建块的虚拟“线”，我可以将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），但如果可能的话，我宁愿保留自己的代码。

Answer 1

现在它的工作如果你使用3次清除：两者但我不知道为什么需要使用那里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>

Answer 2

在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

Answer 3

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

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

并向左浮动并放置边距

整个代码在这里

http://jsfiddle.net/ndEUS/

Answer 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%;
    }
}

希望它可以帮助某人。

响应3列布局与不同的高度块

4 个答案: