0

我试图了解 CSS 和响应式设计是如何工作的。我在这里做了一个小例子。

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

我希望能够在 2、3、4 或更多列上显示我的图块。在此示例中，您只需更改 div“包装器”类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，因为我不喜欢使用固定的 tile 和 wrapper 大小。这将创建一个左右（自动）边距。这对于大屏幕来说不是问题，但在手机或平板电脑屏幕上却毫无用处。

我应该怎么做才能创建一个带有列的瓦片系统而不必固定包装宽度？有没有更好的方法来生成这种瓷砖？

4

1 回答 1

0

在某种程度上..你有点从其他地方的做法倒退。

您不希望修改包装器的宽度，而是希望包装器的宽度是流动的。这意味着它可以是 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 等。

然后，您可以创建任何您想要的组合，只要类加起来为 12。所以 col-6 和 col-6 就像上面一样，或者可能是 col-3、col-3、col-3、col-3。如果你有理由... col-1, col-2, col-3, col-5, col-1 ...

这有帮助吗？

于 2013-04-26T13:43:36.150 回答