我正在尝试在网页上添加四列,等距离地排列,并在浏览器窗口调整大小时保持它们的结构。我是根据一个教程制作的,但现在找不到了。它们看起来很好,直到你调整浏览器窗口的大小。有人能告诉我为什么当浏览器窗口调整大小时,我的第三和第四列会在前两列下换行吗?
#ColumnMain {
width: 100%;
height: auto;
float: left;
margin-left: auto;
margin-right: auto;
min-width: 44%
}
.col1 {
float: left;
padding: 10px 20px 15px 20px;
margin: 0;
width: 350px;
height: 100px;
border-left: solid 1px #35488C;
}
.col2 {
float: left;
padding: 10px 20px 15px 20px;
margin-left: 10px;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
}
.col3 {
float: right;
padding: 10px 20px 15px 20px;
margin: 0;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
overflow: hidden;
}
.col4 {
float: right;
padding: 10px 20px 15px 20px;
margin-right: 10px;
width: 22%;
height: 100px;
border-left: solid 1px #35488C;
Overflow: hidden;
}
<div class="columns" id="ColumnMain">
<div class="col1">content-1</div>
<div class="col2">content-2</div>
<div class="col3">content-3</div>
<div class="col4">content-4</div>
</div>