1

しばらくの間、これらの 4 つの列を自分の Web サイトに配置しました。それらはすべて同じ高さのボックスに配置され、すべて一列に並んでいます。私は現在、サイトをレスポンシブにすることを検討しており、これらの列が小さなデバイスで重なっていることに気付きました。

たとえば、電話デバイスの場合、2 列の 2 行または 1 列の 4 行に切り替えるという点で、これらの列を柔軟にしたいと考えています。

メディアクエリを使用して、.keypoints .column {表示をblockの代わりに作成してみましたinline-block。ただし、これでも列は 1 行に収まっていました。

これは、列を完全に削除し、画面サイズに応じてインライン/ブロック要素スパンに変換する必要があるだけですか、それとも現在の列メソッドを使用してこれを行うことができますか?

http://jsfiddle.net/ycwtb01m/

HTML

<div class="keypoints">
    <div class="column">COLUMN1</div>
    <div class="column">COLUMN2</div>
    <div class="column">COLUMN3</div>
    <div class="column">COLUMN4</div>
</div>

CSS

.keypoints {
    -webkit-column-count: 4;
    -webkit-column-gap: 1%; /* Saf3, Chrome*/
    -moz-column-count: 4;   
    -moz-column-gap: 1%; /* FF3.5+ */
    column-count: 4;        
    column-gap: 1%; /* Opera 11+*/
    margin-left: 15%;
    margin-right: 15%;
    width: 67%;
    color: #ffffff;
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    z-index: 1;
}

.keypoints .column {
    display: inline-block;
    width: auto;
    padding: 5%;
    font-family: "Swisz", Helvetica, Arial;
    font-size: 14pt;
    font-weight: 300;
    text-align: center;
    color: #ffffff;
    border-radius: 20px;
    background-color: #000000;
    box-shadow: rgb(198, 40, 22) 0px 4px;
    overflow: hidden;
    z-index: 0;
    height: 110px;
}
4

0 に答える 0