Question

我有一个四列div布局。

在移动设备上查看页面时，我希望布局缩小为两列div。

CSS：

.style1 {
    font-style:normal;
    font-weight:bold;
    color:#FFFFFF;
}
#footer {
    clear:both;
    float:left;
    width:100%;
}
#footer p {
    margin-left:2%;
    padding-right:2%;
}

/* Start of Column CSS */

.container1 {
    float:left;
    width:100%;
    position:relative;
}
#col1 {
    float:left;
    width:23%;
    min-height:268px;
    position:relative;
    margin-right:10px;
    /*left:77%;*/
    padding:10px;
    overflow:hidden;
    background-color:#DDDDDD
}
#col2 {
    float:left;
    width:23%;
    min-height:268px;
    position:relative;
    margin-right:10px;
    /*left:81%;*/
    padding:10px;
    overflow:hidden;
    background-color:#DDDDDD
}
#col3 {
    float:left;
    width:23%;
    min-height:268px;
    position:relative;
    margin-right:10px;
    /*left:85%;*/
    padding:10px;
    overflow:hidden;
    background-color:#DDDDDD;
}
#col4 {
    float:left;
    width:23%;
    min-height:268px;
    position:relative;
    /*margin-right:10px;
    left:89%;*/
    padding:10px;
    overflow:hidden;
    margin-bottom:15px;
    background-color:#DDDDDD
}
#year_banner {
    width:auto;
    margin:0px 10px 0px 10px;
    align-self:center;
    background-color:#E60000;
    text-align:center;
}

    img.displayed {
    margin:0 auto;
    display:block;
    max-width:100%;
    height:auto;
}

任何帮助表示赞赏！非常感谢！

Answer 1

你有很多重复的代码。您可以通过使用类来消除它;这也可以让屏幕更改大小时更容易一次更改所有列。

例如：

.col{
    float:left;
    width:23%;
    min-height:268px;
    position:relative;
    margin-right:10px;
    padding:10px;
    overflow:hidden;
    background-color:#DDDDDD
}

@media screen and (max-width:380px){
  .col{
    width:50%;
  }

}

Answer 2

我准备了一个简单的例子：https://jsfiddle.net/rey9xc1h/

body {
  margin: 0;
}
.row {
  width: 100%;
  min-width: 320px;
  margin: 0;
}
.col {
  box-sizing: border-box;
  background-color: #fff;
  float: left;
  padding: 10px;
  margin: 5px 1%;
  width: 98%;
}
@media (min-width: 320px) {
  .row {
    overflow: hidden; /* Clearfix */
  }
  .col {
    width: 48%;
    float: left;
  }
}
@media (min-width: 768px) {
  .col {
    width: 23%;
  }
}

CSS：四列Div布局缩小到堆叠两列Div

2 个答案: