时间戳

首页 > 解决方案 > 如何防止列式 DIV 换行？

html - 如何防止列式 DIV 换行？

问题描述

只要有空间，我试图让盒子漂浮/堆叠到右边。我非常接近我想要的，但是 DIV 不断被包裹，所以项目失去了它们的标题。

    .box{
    height: additive;
    width: 222px;
    margin: 8px;
    background-color: #fff;
    border-radius: 3px;
    padding: 10px;
    font-size: 14px;
    box-shadow: 4px 4px #666;
    word-break: keep-all;
    }
    body {
    padding: 20px;
    font-family: Helvetica;
    background-color: #20262e;
    -webkit-column-width: 202px;
    -moz-column-width: 202px;
    -column-width: 202px;
    -ms-column-width: 202px;
    column-width: 202px;
    }
<html>

  <head>
  </head>

  <body>
    <div class="box">
      <h3>
        eins
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>13
      <br/>14
      <br/>15
      <br/>16
      <br/>17
      <br/>18
      <br/>19
      <br/>20
      <br/>
    </div>
    <div class="box">
      <h3>
        zwei
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>
    </div>
    <div class="box">
      <h3>
        drei
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>
    </div>
    <div class="box">
      <h3>
        vier
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>
    </div>
    <div class="box">
      <h3>
        fünf
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>13
      <br/>14
      <br/>15
      <br/>16
      <br/>17
      <br/>18
      <br/>19
      <br/>20
      <br/>
    </div>
    <div class="box">
      <h3>
        sechs
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>
    </div>
    <div class="box">
      <h3>
        sieben
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>
    </div>
    <div class="box">
      <h3>
        acht
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>
    </div>
    <div class="box">
      <h3>
        neun
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>13
      <br/>14
      <br/>15
      <br/>16
      <br/>17
      <br/>
    </div>
  </body>

</html>

这是一个小提琴： https ://jsfiddle.net/Omphaloskopie/py1hrpvs/

正如你所看到的，盒子包装得很丑。我怎样才能防止这种情况？

编辑：

为了澄清我在寻找什么：我试图没有网格，而是紧紧地包裹着内容的盒子。盒子根本不应该分开/包装。盒子最好靠右对齐以填满页面，但如果单个盒子太高，垂直滚动就可以了。在有足够垂直空间的地方，更多的小盒子应该在彼此的顶部对齐。页面不会有一条直线底线，底部看起来像左对齐文本翻转了 90°。

基本上它应该看起来像这样，例如： http ://www.ballajack.com/wp-content/uploads/2012/01/bookolio-e1327663255869.jpg （这种外观是通过预先考虑盒子大小和绝对定位来实现的。我是试图避免这种情况。必须有一个更简单的方法。）

标签： htmlcssword-wrapcss-multicolumn-layout

解决方案

我不确定你想要的结果是什么，但从它的声音来看，你可以做到这一点......

.box{
  height: auto;
  width: 222px;
  margin: 8px;

  background-color: #fff;
  border-radius: 3px;
  padding: 10px;
  font-size: 14px;
  box-shadow: 4px 4px #666;
  word-break: keep-all;
}

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
  margin-left: -8px;
}
<html>

  <head>
  </head>

  <body>
    <div class="box">
      <h3>
        eins
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>13
      <br/>14
      <br/>15
      <br/>16
      <br/>17
      <br/>18
      <br/>19
      <br/>20
      <br/>
    </div>
    <div class="box">
      <h3>
        zwei
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>
    </div>
    <div class="box">
      <h3>
        drei
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>
    </div>
    <div class="box">
      <h3>
        vier
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>
    </div>
    <div class="box">
      <h3>
        fünf
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>13
      <br/>14
      <br/>15
      <br/>16
      <br/>17
      <br/>18
      <br/>19
      <br/>20
      <br/>
    </div>
    <div class="box">
      <h3>
        sechs
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>
    </div>
    <div class="box">
      <h3>
        sieben
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>
    </div>
    <div class="box">
      <h3>
        acht
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>
    </div>
    <div class="box">
      <h3>
        neun
      </h3>1
      <br/>2
      <br/>3
      <br/>4
      <br/>5
      <br/>6
      <br/>7
      <br/>8
      <br/>9
      <br/>10
      <br/>11
      <br/>12
      <br/>13
      <br/>14
      <br/>15
      <br/>16
      <br/>17
      <br/>
    </div>
  </body>

</html>

这是一个小提琴https://jsfiddle.net/py1hrpvs/71/

或者...

一种不使用 flexbox 的方法是不指定最大高度

.box{
  height: auto;
  width: 222px;
  margin: 8px;
  background-color: #fff;
  border-radius: 3px;
  padding: 10px;
  font-size: 14px;
  box-shadow: 4px 4px #666;
  word-break: keep-all;
  display: inline-block;
}

body {
 padding: 20px;
 font-family: Helvetica;
 background-color: #20262e;
 column-count: 4;
 column-gap: 1em;
}

推荐阅读