我有一个四列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;
}
任何帮助表示赞赏!非常感谢!
答案 0 :(得分: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%;
}
}
答案 1 :(得分:0)
我准备了一个简单的例子: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%;
}
}