Question

我已经完成了我的网站的布局，这似乎工作正常，但我想确保我没有过度复杂或使用垃圾技术。

所以这就是它的工作原理，在DIV中我有另一个div是一个表，在其中我有另外3个div是表格单元

<div id="container-main">
    <div id="columns-3">
        <div class="main-col-left-s"></div>
        <div class="main-col-center-s"></div>
        <div class="main-col-right-s"></div>
    <hr>
        <div class="main-col-left-s"></div>
        <div class="main-col-center-s"></div>
        <div class="main-col-right-s"></div>
    </div>
</div>

每一栏都包含各种元素（如pinterest网站）。

现在，当我调整大小，达到一定宽度后，我只想要看到2个列，后来只有一个。虽然堆叠从3到1并不困难，因为它会自动发生，但问题是3到2列，所以我做的是当屏幕变小时我给了中间列display: none属性，所以它没有显示（在后端，我假设如果当前的数据被隐藏，数据将被转移到可见列。）

这种解决方案是垃圾，还有更好的解决方案，或者它会做什么？

我不希望有一种情况，当我在一行中有2列而在下一行只有一列时，所以这可能发生：

ǀdataǀdataǀ
ǀdataǀ    ǀ
-----------
ǀdataǀdataǀ
ǀdataǀ    ǀ

但它应该始终是：

ǀdataǀdataǀ
ǀdataǀdataǀ
-----------
ǀdataǀdataǀ
ǀdataǀdataǀ

Answer 1

您需要使用media queries。在你的css文件中尝试这样的事情：

.main-col-left-s, .main-col-center-s, .main-col-right-s {
  width: 100%;
}

@media (min-width: 600px) {
  .main-col-left-s, .main-col-center-s, .main-col-right-s {
    width: 50%;
  }
}

@media (min-width: 960px) {
  .main-col-left-s, .main-col-center-s, .main-col-right-s {
    width: 33.33%;
  }
}

Answer 2

你也可以使用css的float: left属性，为你的表格单元格做出你想要的东西

Answer 3

感谢您澄清您的问题。基本上，只有css解决方案是可行的并且是推荐的。使用CSS3和新的灵活盒模型很容易实现，但是，浏览器支持并不是均匀实现的 - 即使是主流浏览器也是如此。所以，如果你想支持至少所有主流浏览器，我建议你坚持传统盒子模型，这就是我的答案所依据的。

解决方案很简单：

用作容器元素的一个块div
多个div s（在容器div内）显示inline-block，这将是您的＆＃34;表格单元格＆＃34;

html结构如下所示：

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>

将以下列方式设置...

div.container{
    width:100%;
    display:block;
    font-size:0;
}
div.box{
    width:30%;
    font-size:40px;
    margin:20px 0 0 2.5%;
    display:inline-block;
}

这将以响应的方式显示3个水平对齐（一行）的框。font-size:0声明是inline-block font spacing issue的解决方法，如果你谷歌它可以阅读更多关于它的信息，还有其他方法可以解决这个问题。

现在，为了在屏幕宽度有限时仅在一行中显示2个框，您可以使用媒体查询，如下所示...

@media all and (max-width:950px){
    div.box{
        width:47%;
       margin:20px 0 0 2%;
}

当然......您可以将max-width约束更改为其他内容。最后，为了添加一些视觉效果，我在下面放了一个小提琴手......

＆＃13;

div.container{
    width:100%;
    height:100%;
    padding-bottom:40px;
    display:block;
    background-color:#eee;
    font-family:Arial;
    font-size:0;
}
div.box{
    color:#666;
    background-color:#fff;
    width:30%;
    font-size:40px;
    font-weight:bold;
    margin:20px 0 0 2.5%;
    line-height:200px;
    display:inline-block;
    border-radius:6px;
    box-shadow:0 4px 5px #ccc;
    text-align:center;
    *display:inline;
    zoom:1;
}

@media all and (max-width:950px){
    div.box{
        width:47%;
       margin:20px 0 0 2%;
    }
}

＆＃13;

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box" style="height:150px">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
</div>

＆＃13;

请注意，上例中有意设置了方框8的高度

响应3列布局

3 个答案: