html - 无内容时列数堆叠

标签 html css css-multicolumn-layout

我环顾四周，但找不到任何描述我的问题的内容。我在主标记中有 5 个部分元素，其中 3 个包含文本和图像。

我正在尝试使用列计数并排显示列中的每个部分，但是没有文本和图像的最后两列堆叠在一起，而不是彼此相邻。我在下面附上了一张照片。

当我添加相同的图像和文本时，它会正常工作，但我想知道我是否可以有空列，因为我还没有它们的内容。

enter image description here

代码:

main {
     -webkit-column-count: 5; /* Chrome, Safari, Opera */
    -moz-column-count: 5; /* Firefox */
     column-count: 5;
}
li {
  list-style: none;
}
.office {
  margin-top: 5%;
  display:inline-block;
  width: 100%;
  text-align: center;
}
.office_border {
  border: 2px solid #95cccc;
  width: 150px;
  margin: auto;
}
.office_title {
  font: normal 1.9rem DIN;
}
.office_properties {
  padding: 0;
}
.office_properties_title {
  font: 0.8rem 'Josefin Sans';
}
.office_properties_title_text {
  font-weight: normal;
}
.office_properties_item_image {
  width: 100%;
}
.office_properties_button {
  padding: 5%;
}
.office_properties_link {
  font-family: 'Josefin Sans';
  text-decoration: none;
  color: #c0392b;
}
<main>
    <section class="office">
        <h1 class="office_title">TITLE</h1>
        <ul class="office_properties">
            <div class="office_border"></div>
            <li class="office_properties_title">
                <h2 class="office_properties_title_text">Heading</h2>
            </li>
            <li class="office_properties_item">
                <a href=""><img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image"></a>
            </li>
            <li class="office_properties_button">
                <a href="" class="office_properties_link">DISCOVER</a>
            </li>
            <div class="office_border"></div>
        </ul>
    </section>
    <section class="office">
        <h1 class="office_title">TITLE</h1>
        <ul class="office_properties">
            <div class="office_border"></div>
            <li class="office_properties_title">
                <h2 class="office_properties_title_text">Heading</h2>
            </li>
            <li class="office_properties_item">
                <a href=""><img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image"></a>
            </li>
            <li class="office_properties_button">
                <a href="" class="office_properties_link">DISCOVER</a>
            </li>
            <div class="office_border"></div>
            <li class="office_properties_title">
                <h2 class="office_properties_title_text">Heading</h2>
            </li>
            <li class="office_properties_item">
                <a href=""><img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image"></a>
            </li>
            <li class="office_properties_button">
                <a href="" class="office_properties_link">DISCOVER</a>
            </li>
            <div class="office_border"></div>
        </ul>
    </section>
    <section class="office">
        <h1 class="office_title">TITLE</h1>
        <ul class="office_properties">
            <div class="office_border"></div>
            <li class="office_properties_title">
                <h2 class="office_properties_title_text">Heading</h2>
            </li>
            <li class="office_properties_item">
                <a href=""><img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image"></a>
            </li>
            <li class="office_properties_button">
                <a href="" class="office_properties_link">DISCOVER</a>
            </li>
            <div class="office_border"></div>
            <li class="office_properties_title">
                <h2 class="office_properties_title_text">Heading</h2>
            </li>
            <li class="office_properties_item">
                <a href=""><img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image"></a>
            </li>
            <li class="office_properties_button">
                <a href="" class="office_properties_link">DISCOVER</a>
            </li>
            <div class="office_border"></div>
        </ul>
    </section>
    <section class="office">
        <h1 class="office_title">TITLE</h1>
        <ul class="office_properties">
            <div class="office_border"></div>
            <li class="office_properties_title"> </li>
            <li class="office_properties_item"> </li>
        </ul>
    </section>
    <section class="office">
        <h1 class="office_title">TITLE</h1>
        <ul class="office_properties">
            <div class="office_border"></div>
            <li class="office_properties_title"> </li>
            <li class="office_properties_item"> </li>
        </ul>
    </section>
</main>

最佳答案

你可以在 main 中添加 display:inline-flex 你也可以找到我做的例子 here ，我还为其他浏览器添加了对列数的支持。 如果您想在片段中观看它，请单击“整页”。 我希望这会有所帮助:)

main {
  display:inline-flex;
    -webkit-column-count: 5; /* Chrome, Safari, Opera */
    -moz-column-count: 5; /* Firefox */
    column-count: 5;
    
}

li {
    list-style: none;
}

.office {
    margin-top: 5%;
    display:inline-block;
    width: 100%;
    text-align: center;
}

.office_border {
    border: 2px solid #95cccc;
    width: 150px;
    margin: auto;
}

.office_title {
    font: normal 1.9rem DIN;
}

.office_properties {
    padding: 0;
}

.office_properties_title {
    font: 0.8rem 'Josefin Sans';
}

.office_properties_title_text {
    font-weight: normal;
}

.office_properties_item_image {
    width: 100%;
}

.office_properties_button {
    padding: 5%;
}

.office_properties_link {
    font-family: 'Josefin Sans';
    text-decoration: none;
    color: #c0392b;
}
  <main>
        <section class="office">
            <h1 class="office_title">TITLE</h1>
            <ul class="office_properties">
                <div class="office_border"></div>
                <li class="office_properties_title">
                    <h2 class="office_properties_title_text">Heading</h2>
                </li>
                <li class="office_properties_item">
                    <a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image"></a>
                </li>
                <li class="office_properties_button">
                    <a href="" class="office_properties_link">DISCOVER</a>
                </li>
                <div class="office_border"></div>
            </ul>
        </section>
         <section class="office">
            <h1 class="office_title">TITLE</h1>
            <ul class="office_properties">
                <div class="office_border"></div>
                <li class="office_properties_title">
                    <h2 class="office_properties_title_text">Heading</h2>
                </li>
                <li class="office_properties_item">
                    <a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image"></a>
                </li>
                <li class="office_properties_button">
                    <a href="" class="office_properties_link">DISCOVER</a>
                </li>
                <div class="office_border"></div>
            </ul>
        </section>
         <section class="office">
            <h1 class="office_title">TITLE</h1>
            <ul class="office_properties">
                <div class="office_border"></div>
                <li class="office_properties_title">
                    <h2 class="office_properties_title_text">Heading</h2>
                </li>
                <li class="office_properties_item">
                    <a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image"></a>
                </li>
                <li class="office_properties_button">
                    <a href="" class="office_properties_link">DISCOVER</a>
                </li>
                <div class="office_border"></div>
            </ul>
        </section>
         <section class="office">
            <h1 class="office_title">TITLE</h1>
            <ul class="office_properties">
                <div class="office_border"></div>
                <li class="office_properties_title">
                    <h2 class="office_properties_title_text">Heading</h2>
                </li>
                <li class="office_properties_item">
                    <a href=""><img src="assets/properties/21JS.jpg" alt="" class="office_properties_item_image"></a>
                </li>
                <li class="office_properties_button">
                    <a href="" class="office_properties_link">DISCOVER</a>
                </li>
                <div class="office_border"></div>
            </ul>
        </section>
         <section class="office">
            <h1 class="office_title">TITLE</h1>
            <ul class="office_properties">
                <div class="office_border"></div>
                <li class="office_properties_title">
                    <h2 class="office_properties_title_text">Heading</h2>
                </li>
                <li class="office_properties_item">
                    <a href=""><img src="assets/properties/21JS.jpg" alt="" class="office_properties_item_image"></a>
                </li>
                <li class="office_properties_button">
                    <a href="" class="office_properties_link">DISCOVER</a>
                </li>
                <div class="office_border"></div>
            </ul>
        </section>
    </main>

关于html - 无内容时列数堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38640458/

上一篇：javascript - 获取表格中的特定列

下一篇：html - 如何使这个用 <div> 标签创建的表格响应？

相关文章：

html - 按升序排列的 Flexbox 列

html - 有没有可以自动缩放HTML图像 map 的工具？

html - (CSS)倾斜img框架而不扭曲图像

css - 大纲不会进入 Bootstrap 4 的 btn-group 按钮

html - 如何将图像调整为 div 的背景？

css - 悬停在子导航上时如何阻止悬停列表项的文本更改回默认值

css - 四个元素奇怪地分布在 3 列容器中 - css 列

css - 为什么我的多列间距在 Chrome 中不起作用？

javascript - 如何从 JS 横幅中剪切形状？

html - 如何定位列表中的第二个跨度？

©2024 IT工具网  联系我们