Question

我正在努力使用流畅的css，当浏览器窗口缩小时会丢弃div。

这是代码的jsfiddle http://jsfiddle.net/maf1984/1r4v8fcf/

   *{
     padding : 0;
     margin : 0;
     border : 0;
}
.blended_grid{
     display : block;
     width: 100%;
     min-width: 400px;
     max-width: 1000px;
     overflow : auto;
     margin : auto;
}

.header{
     float : left;
     width: 100%;
     height : 100px;
     background-color : rgba(137,255,132,0.4);
}

#contentliquid {
    float: left;
    width: 100%;
}
.maintopblock{ 
     float : left;
     margin-left: 200px;
     width : 80%;
     height : 200px;
     background-color : rgba(33,28,255,0.4);
}
.cube1{
     float : left;
     margin-left: 200px;
     width : 20%;
     height : 200px;
     background-color : rgba(255,123,161,0.4);
}
.cube2{ 
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(255,158,132,0.4);
}
.cube3{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(254,255,147,0.4);
}
.cube4{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(189,255,155,0.4);
}
.mainbottomblock{
     float : left;
     width : 40%;
     height : 400px;
     margin-left: 200px;
     background-color : rgba(33,28,255,0.4);
}
.cube5{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(132,197,255,0.4);
}
.cube6{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(111,108,255,0.4);
}
.cube7{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(0,139,255,0.4);
}
.cube8{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(147,0,255,0.4);
}
.sidebar{
     float : left;
     width : 200px;
     height : 800px;
     margin-left: -100%;
     background-color : rgba(249,255,4,0.4);
}
.footer{
     float : left;
     width: 100%;
     height : 100px;
     background-color : rgba(133,255,123,0.4);
}

基于jsfiddle，我试图将顶部的下方的1,2,3和4号盒子放在一起（不放入主体），并将盒子5,6,7和8放在一起，因为它们是同样，在主要街区旁边（不要低于主楼）。

我一直在寻找解决方案，许多教程和布局生成器。当浏览器缩小时，如何防止编号框丢失？

Answer 1

你需要做一些数学运算:)

您当前设置了总宽度的20％，但是您需要设置宽度的20％减去200px边距。像这样：

width : calc((100% - 200px) / 4);

请参阅小提琴http://jsfiddle.net/1r4v8fcf/1/我只更新了前4个div，但你可以添加其余的:)）

CSS流体布局和删除div

1 个答案: