Question

我想创建一个响应式布局，其中有两列，左侧和右侧。在较小的屏幕上，左侧的框必须移动到某些位置。这对我的代码很有用，但问题是在大屏幕上盒子之间的右侧有一个间隙。

我该如何解决？

想法和问题

enter image description here

的jsfiddle

当您查看以下jsfiddle时，您会发现它适用于小屏幕，但问题不会在大屏幕上移动。我知道我这样做的方式是错误的，但我怎么能用CSS获得这个想要的结果？

.main{
    width:65%;
    height:125px;
    margin-bottom:10px;
    float:left;
}
.small{
    width:35%;
    height:25px;
    float:left;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }    
}

Answer 1

尝试此代码DEMO

.main{
    width:65%;
    height:125px;
    margin-bottom:10px;
   float:left; 
    display: inline-block;
}
.small{
    width:35%;
    height:25px;
    /* float:left; */
    display:inline-block;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }

}

/* colors */
.main{background:#d0d0d0;}
.orange{background:#ecbd00;}
.green{background:#6aec00;}
.blue{background:#00c8ec;}
.purple{background:#c300ec;}
.red{background:#e93a73;}

Answer 2

问题是html的结构，你把每个主要的div放到了小div之后。所以它首先打印那个div。

我建议做的是改变这样的html结构;

将左列左右浮动。

然后围绕一个div放置

添加媒体css，以便800px（或任何你需要的）你可以在display none;上.hide800隐藏div，然后在你当前的html周围添加一个div，但是将内联样式设置为display none 。然后以800px（或任何大小隐藏第一个div）将css添加到display: block !Important;

通过这种方式，它可以满足您对全宽浏览器的需求，但是当屏幕足够小以更改结构时，您可以使用当前代码。

HTML;

<div class="hide800">
    <div class="left-col">
    <div class="main">
    </div>
    <div class="main">
    </div>
    <div class="main">
    </div>
    </div>
    <div class-right-col">
    <div class="small orange">
    </div>
    <div class="small green">
    </div>
    <div class="small blue">
    </div>
    <div class="small purple">
    </div>
    <div class="small red">
    </div>
    </div>
</div>
<div class="show800" style="display:none;">
<div class="main">
</div>
<div class="small orange">
</div>
<div class="small green">
</div>

<div class="main">
</div>
<div class="small blue">
</div>
<div class="small purple">
</div>

<div class="main">
</div>
<div class="small red">
</div>
</div>

的CSS;

.left-col {
float: left;
}
.right-col {
float: right;
}
@media screen and(max-width:800px){
.hide800 {
display: none;
}
.show800 {
display: block !Important;
}
}

如果您需要我进一步解释，请告诉我：）

CSS，响应，使浮动框堆叠起来

2 个答案: