没有内容时的列数堆叠

时间：2016-07-28 15:17:41

标签： 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>

1 个答案:

答案 0 :(得分：0)

您可以将display:inline-flex添加到main，您也可以找到我创建的示例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>

相关问题
最新问题