1

我已经在我的网站上放置了这 4 个专栏一段时间了。它们都设置在相同高度的盒子中，并且都排成一行。我现在正在考虑使网站具有响应性，并注意到这些列只是在较小的设备上重叠。

我希望这些列灵活，例如，如果它是电话设备，它会切换到 2 行 2 列或 4 行 1 列。

我尝试使用媒体查询并将.keypoints .column {显示设置为block而不是inline-block. 然而，这仍然使列保持在一行中。

这仅仅是我需要完全删除列并将它们变成内联/块元素跨度的情况，具体取决于屏幕大小，还是仍然可以使用我当前的列方法来完成？

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