column-width多列布局内容被截断分开

发布于 2022-09-02 15:48:25 字数 1347 浏览 15 评论 0

各位亲,你们是否有人在使用 css3 的column-width多列布局,然后是否有碰到过内容被截断分开的问题?然后你们是怎么解决的呢?谢谢~

如图(正常情况下,标题是要位于图片下方的):

clipboard.png

css代码如下:

<style type="text/css">
  .container {
    -webkit-column-width: 180px;
    -moz-column-width: 180px;
    -o-column-width: 180px;
    column-width: 180px;
    -webkit-column-gap: 25px;
    -moz-column-gap: 25px;
    -o-column-gap: 25px;
    column-gap: 25px;
  }

  .container .ul {
    width: 180px;
    margin: 20px 0;
  }
  .container .ul img {
    max-width: 100%;
  }
  .title {
      color: #ff0;
      background-color: #00b5e9;
  }
  </style>

html示例代码如下:

<div class="container">
    <div class="ul"><img src="images/P_00.jpg" />
      <div class="title">testtest
      </div>
      <div class="title">testtest222
      </div>
    </div>
    <div class="ul"><img src="images/P_01.jpg" />
      <div class="title">testtesttest
      </div>
    </div>
    <div class="ul"><img src="images/P_02.jpg" />
      <div class="title">testtesttest
      </div>
    </div>
 </div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

饭团 2022-09-09 15:48:25

给子容器添加{
height:100%;
overflow: auto;
}

眼角的笑意。 2022-09-09 15:48:25

兄弟,你这个问题最后怎么解决的。我也遇到了

ゞ花落谁相伴 2022-09-09 15:48:25

你这个需要在内容box设置一个 height100%;overflow: auto;如果盒子不够是不行的

分类区域(瀑布流标签盒子)

内容区域盒子标签(宽度100%,高度自动, width:100%,overflow: auto;),这里的100%代表的是瀑布流中一个盒子的100%(比如是分的3栏,就代表33.333333%的百分之百;如果你区的是四栏就代表25%的百分之百)        内容盒子( height100%;overflow: auto;)

这个结构就完美了,
由于本着授人鱼又不如授人以渔的态度,代码就不贴出来了,

木緿 2022-09-09 15:48:25

给包含文字和图片的class名为ul添加:
column-break-inside:avoid;
-webkit-column-break-inside:avoid;

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文