Question

我尝试了解CSS和响应式设计的工作原理。我做了一个小例子here。

这是一个简单的平铺模板。

我希望能够在2,3,4或更多列上显示我的图块。在此示例中，您只需更改div“wrapper”类c2, c3, c4以修改列数。

这是有效的，因为我的磁贴向左浮动，这些c2, c3, c4修改了我的包装器的宽度。请参阅HTML和CSS文件或继续JSFiddle。

HTML

<div class="wrapper c2"> <!-- try with c3, c4-->
    <div class="scrollable">
        <div class="webbutiles">
            <a href='?page_id=77'  class='tile TBlue iconmain '><div class='boxContent'><i class='icon-group'></i></div><div class='tilename '><div class='name'>Tile 1</div></div></a>
            <a href='?page_id=85'  class='tile TDarkGreen iconmain '><div class='boxContent'><i class='icon-comments-alt'></i></div><div class='tilename '><div class='name'>Tile 2</div></div></a>
            <a href='?page_id=89'  class='tile TDarkPurple iconmain '><div class='boxContent'><i class='icon-cogs'></i></div><div class='tilename '><div class='name'>Tile 3</div></div></a>
            <a href='?page_id=91'  class='tile TDarkBlue iconmain '><div class='boxContent'><i class='icon-table'></i></div><div class='tilename '><div class='name'>Tile 4</div></div></a>
            <a href='?page_id=93'  class='tile TDarkRed iconmain '><div class='boxContent'><i class='icon-heart'></i></div><div class='tilename '><div class='name'>Tile 5</div></div></a>
            <a href='?page_id=95'  class='tile TTwitterBlue iconmain '><div class='boxContent'><i class='icon-twitter'></i></div><div class='tilename '><div class='name'>Tile 6</div></div></a>
            <a href='?page_id=97'  class='tile TGreen iconmain '><div class='boxContent'><i class='icon-columns'></i></div><div class='tilename '><div class='name'>Tile 7</div></div></a>
            <a href='?page_id=87'  class='tile TOrange t2x iconmain '><div class='boxContent'><i class='icon-reorder'></i></div><div class='tilename '><div class='name'>Tile Large</div></div></a>
        </div>
    </div>
</div>

CSS

    /* General tile settings */
.tile{ display:block;  float:left;  background-color:#525252;  width:150px;  height:150px;  cursor:pointer;  text-decoration:none;  color:#fff;  overflow:hidden;  position:relative;  font-weight:300;  font-size:11pt;  letter-spacing:0.02em;  line-height:20px;  margin:0 10px 10px 0;  overflow:hidden}
.tile:hover{ outline:3px #3a3a3a solid}


/* Tile responsive setting. */
@media (min-width:1025px){
    .wrapper{width:1024px}
}

.wrapper{margin-left:auto; margin-right:auto}
.wrapper.c2{width:400px}
.wrapper.c3{width:600px}
.wrapper.c4{width:800px}
.wrapper.c5{width:1000px}
.resimgicon {max-width:62px;height:auto;}
.tile .boxContent .resimgicon{ margin-left: 3em; margin-top: 2.7em;}
.tile{ width:157px;  height:157px}
.tile.t2x{ width:324px}
.tile.t2x .boxContent{ width:324px}

@media (max-width:640px){
    .wrapper{margin-left:auto; margin-right:auto}
    .wrapper.c2{width:324px}
    .wrapper.c3{width:491px}
    .wrapper.c4{width:658px}
    .wrapper.c5{width:785px}
    .resimgicon {max-width:64px;height:auto;}
    .tile .boxContent .resimgicon{ margin-left: 2.7em; margin-top: 2.8em;}
    .tile{ width:147px;  height:147px}
    .tile.t2x{ width:304px}
    .tile.t2x .boxContent{ width:304px}
}

@media (max-width:360px){
    .wrapper{margin-left:auto; margin-right:auto}
    .wrapper.c2{width:184px}
    .wrapper.c3{width:281px}
    .wrapper.c4{width:378px}
    .wrapper.c5{width:435px}
    .resimgicon {max-width:38px;height:auto;}
    .tile .boxContent .resimgicon{ margin-left: .74em; margin-top: .68em;}
    .tile{ width:77px;  height:77px}
    .tile.t2x{ width:164px}
    .tile.t2x .boxContent{ width:164px}
}

我不喜欢这个CSS，因为我不喜欢使用固定的磁贴和包装大小。这会创建左右（自动）游戏。对于大屏幕来说这不是问题，但在手机或平板电脑屏幕上却无用。

我应该怎样创建一个带有列的图块系统，而不必使用固定的包装宽度？有没有更好的方法来生成这种瓷砖？

Answer 1

在某种程度上......你可以从其他地方的做法做出反击。

不要修改包装器的宽度，而是希望包装器的宽度是流动的。意思是它可以是320px宽或2560px宽。

然后...根据网格系统给出一组以百分比计算的预设列宽。

假设您希望最多12列宽。那么每组列必须总共等于12。

然后，例如，如果你想要一个全宽度列，你可以将这个类称为“col-12”并给它width: 100%;

然后，如果你想要两个列，两个列的宽度相等，例如它们之间的差距为3.8％。然后你会计算100％ - 3.8％= 96.2％然后96.2％/ 2 = 48.1％。创建一个名为col-6的类，其中包含width: 48.1%和margin-right: 3.8%;然后创建另一个名为“last”的类此类应用于“行”中的最后一个div，并且其中包含margin-right: 0;为了重置最后一个div的不需要的右边距。

用上述相同的概念冲洗并重复制作col-1，col-2，col-3等。

然后，只要类加起来就可以创建任何你想要的组合。所以col-6和col-6如上，或者col-3，col-3，col-3，col-3 。如果你有理由... col-1，col-2，col-3，col-5，col-1 ......

这有帮助吗？

如何创建HTML / CSS响应磁贴？

1 个答案: