Как предотвратить упаковку колонных DIV? - PullRequest
Новая
       37

Как предотвратить упаковку колонных DIV?

0 голосов
/ 18 сентября 2018

Я пытаюсь, чтобы ящики плавали / складывались вправо, пока есть место. Я подошел довольно близко к тому, что хочу, но 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/

Как видите, коробки очень уродливые. Как я могу предотвратить это?

Edit:

Чтобы уточнить, что я ищу: я пытаюсь не иметь сетку, но ящики плотно обернуты вокруг содержимого. Коробки не должны быть разделены / обернуты вообще. Боксы должны быть выровнены, предпочтительно, вправо, чтобы заполнить страницу, но если бы у отдельных блоков была высокая вертикальная прокрутка, было бы хорошо. Там, где достаточно вертикального пространства, более мелкие прямоугольники должны располагаться друг над другом. Страница не будет иметь прямой нижней линии, нижняя часть будет выглядеть как выровненный по левому краю текст, перевернутый на 90 °.

В основном это должно выглядеть так, например: http://www.ballajack.com/wp-content/uploads/2012/01/bookolio-e1327663255869.jpg (Этот вид достигается путем преднамеренного определения размеров ящиков и абсолютного позиционирования. Я пытаюсь избежать этого. Там имеет , чтобы быть более простым способом.)

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

Характер ваших списков имеет разную высоту.Если вы используете column и заполняете все пробелы, он автоматически выбирает нижний список, так как он заполняет все пробелы.

Даже если вы не измените высоту каждого списка, он также оставит пустое пространство внизу, так как последний список перейдет наверх.

Таким образом, в общем, вы не можете заполнить всепробелы, если у вас нет одинаковой высоты.

Самый близкий подход, который вы можете сделать, это использовать одинаковую высоту для всего списка, либо использовать column или float

.box{
    /*height: additive;*/
    width: 202px;
    margin: 8px;
    background-color: #fff;
    border-radius: 3px;
    padding: 10px;
    font-size: 14px;
    box-shadow: 4px 4px #666;
    word-break: keep-all;
    min-height:400px;
    max-height:400px;
    float: left;
    }
    body {
    padding: 20px;
    font-family: Helvetica;
    background-color: #20262e;
    width:100%;
    /*
    -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>
0 голосов
/ 18 сентября 2018

Я не уверен, каким был ваш желаемый результат, но по звукам, вы можете сделать это ... 

.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;
}
...