文章/答案/技术大牛

发布

社区首页 >问答首页 >当没有内容时，列计数叠加

问当没有内容时，列计数叠加
EN

Stack Overflow用户

提问于 2016-07-28 15:17:40

回答 1查看 171关注 0票数 0

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

我试图使用列计数来获得列中的每个部分，但是最后两个列没有文本和图像堆栈，而不是彼此相邻。我在下面附了一张照片。

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

代码：

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>

html

css

css-multicolumn-layout

回答 1

Stack Overflow用户

发布于 2016-07-28 15:33:25

您可以将display:inline-flex添加到main中，您还可以找到我制作的这里的一个示例，还可以为其他浏览器添加对列计数的支持。如果您想在片段中观看它，请单击“完整页”。我希望这会有所帮助：)

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38640458

复制

相似问题

问当没有内容时，列计数叠加
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当没有内容时，列计数叠加EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当没有内容时，列计数叠加
EN