0

私は周りを見回しましたが、私の問題を説明するものは何も見つかりませんでした。メイン タグに 5 つのセクション要素があり、そのうちの 3 つにテキストと画像が含まれています。

列数を使用して列の各セクションを並べて取得しようとしていますが、テキストと画像のない最後の 2 つの列は、互いに隣り合うのではなくスタックします。下に写真を添付し​​ました。

同じ画像とテキストを追加すると、正常に機能しますが、まだコンテンツがないため、列を空にすることができるかどうかを知りたいです。

ここに画像の説明を入力

コード：

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>

4

1 に答える 1

0

main に追加できます。ここdisplay:inline-flexで作成した例も見つけることができます。また、他のブラウザーの列数のサポートも追加しました。スニペットで見たい場合は、「フルページ」をクリックしてください。これが役立つことを願っています:)

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>

于 2016-07-28T15:33:25.793 に答える