主页 / 问题 / 608316
Accepted
Игорь
Asked:2020-12-27 14:34:44 +0000 UTC2020-12-27 14:34:44 +0000 UTC

列数和块包装。列数的细微差别

  • 772

你好！有一个.block包含三个块的容器.item-block。容器必须分为两列，第一列将包含前两个块，第二列 - 分别是最后一个。在这种情况下，必须满足条件：具有类的 div.item-block必须是 的直接后代.block。

我想实现 using column-count，但我遇到了一个问题：后者.item-block没有完全转移到第二列 - 部分保留在第一列中。请告诉我是否有可能修复这一刻，如果不能，是否有这种块的任何替代实现。链接到codepen中的示例。

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  background: #d3d3d3;
}
.container {
  padding: 15px;
  background: #fff;
}
.block {
  column-count: 2;
}
.item-block {
  margin-bottom: 10px;
}
<div class="container">
  <div class="block">
    <div class="item-block">
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
    </div>
    <div class="item-block">
      2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="item-block">
      3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
  </div>
</div>

html

5 个回答

  1. Best Answer

    它似乎工作：

    .item-block {
  margin-bottom: 10px;
  width: 100%;
  float: left;
  page-break-inside: avoid;
  break-inside: avoid;
}

    完整的片段：

    * {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  background: #d3d3d3;
}
.container {
  padding: 15px;
  background: #fff;
}
.block {
  -moz-column-count: 2;
  column-count: 2;
}
.item-block {
  margin-bottom: 10px;
  width: 100%;
  float: left;
  page-break-inside: avoid;
  break-inside: avoid;
}
    <div class="container">
  <div class="block">
    <div class="item-block">
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
    </div>
    <div class="item-block">
      2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="item-block">
      3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
  </div>
</div>

    • 19

  2. 您可以尝试添加

    .item-block {
  page-break-inside: avoid;
  break-inside: avoid;
}

    但效果有些具体...

    PS：https ://css-tricks.com/almanac/properties/b/break-inside/

    • 14

  3. 您可以通过添加display: inline-block. 到目前为止，然后它将break-inside开始正常工作:)

    * {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  background: #d3d3d3;
}
.container {
  padding: 15px;
  background: #fff;
}
.block {
  -moz-column-count: 2;
  column-count: 2;
}
.item-block {
  margin-bottom: 10px;
  display: inline-block;
}
    <div class="container">
  <div class="block">
    <div class="item-block">
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
    </div>
    <div class="item-block">
      2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="item-block">
      3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
  </div>
</div>

    • 12

  4. 如果你想让 .item-block 元素换行

    由于@Qwertiy和@SashaOmelchenko的回答，基本上答案已经存在。它仍然只是解决容器额外高度的问题。

    据我所知，这只是 Chromium 浏览器（例如 Chrome）的问题。在 Firefox 和 IE 中，@SashaOmelchenko 的答案在没有容器错误的情况下有效。因此，允许您仅为其应用样式的 hack 适用于 Chromium @supports (-webkit-appearance:none)。并且以类似的方式，您可以选择可以为单个浏览器设置标记的技巧。

    所有代码

    * {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  background: #d3d3d3;
}
.container {
  padding: 15px;
  background: #fff;
  border: 1px solid red;
}
.block {
  -moz-column-count: 2;
  column-count: 2;
}

.item-block:not(:last-child) {
  margin-bottom: 10px;
}

.item-block {
  display: inline-block;
}

/* Стили для Chrome */
@supports (-webkit-appearance:none) {
  .item-block {
    width: 100%;
    float: left;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
    <div class="container">
  <div class="block">
    <div class="item-block">
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
    </div>
    <div class="item-block">
      2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="item-block">
      3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
  </div>
</div>

    • 6

  5. 如果你想.item-block移动元素

    设置为.item-block display: flex;。

    此外，要仅在块之间设置缩进而不影响最后一个item-block（无论margin-bottom: 10px;最后一个没有），请像这样设置缩进。

    .item-block + .item-block {
  margin-top: 10px;
}

    运行示例

    * {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #d3d3d3;
}

.container {
  padding: 15px;
  background: #fff;
}

.block {
  column-count: 2;
}

.item-block {
  display: flex;
}

.item-block + .item-block {
  margin-top: 10px;
}
    <div class="container">
  <div class="block">
    <div class="item-block">
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
    </div>
    <div class="item-block">
      2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="item-block">
      3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
  </div>
</div>

    • 5

相关问题