css - 把之前的div放到 "float atribute"下面去

Question

假设我有一个包含三个并排 div 的部分，主 div(中心)占据了 50% 的空间，左右各占 25%。

现在，我正在使用媒体查询在 kindle 肖像 (600 x 1024) 上以最佳状态显示网站。

因为它的分辨率较低，为了使网站看起来更好，我想在主栏中出现，并在她的底部放置之前放在旁边的两个。

我能够使用“ float ”属性将主 div 放在左侧，但碰巧其他两个不在主 div 下。

这有可能吗？我正在尝试，但我离能够做我假装的事情还很遥远。

HTML代码:

<section id="content">
<div class="main_1">
    <div></div>
</div>
<div class="main_2">
    <div></div>
</div>
<div class="main_3">
    <div></div>
</div>

CSS:

   #content{
    border:0;
    padding:15px 5px 15px 55px;
    margin:0;
    min-height:600px;
    border:1px solid;
    overflow:visible;
    box-shadow:3px 0 4px rgba(0, 0, 0, 0.1);
    overflow:hidden;
    left:0px;
    right:0px;
    top:0px;
    z-index:1;
}

.main_1,.main_2,.main_3{
    display:inline;
    float:left;
    margin-left:1%;
    margin-right:1%;
    padding:9px 0;
    min-height:10px;
}

.main_1{width:23.0%;}
.main_2{width:45.0%;}
.main_3{width:22.0%;}

之前的代码是针对高分辨率的。现在对于 kindle (600x1024)，我使用以下方法将主 div 放在右边，但其他的在左边一团糟:

CSS:

.main_1,.main_3{
        display:inline;
        float:right;
        margin-left:1%;
        margin-right:1%;
        padding:9px 0;
        min-height:10px;
    }

    #content .main_2{
    float: left;

}

已解决:

我不知道这在代码方面是否是最好的主意，但我复制了左侧的 div 并将其隐藏在 div 中心和右侧之间。

在媒体查询中，我只需要隐藏左侧的 div 并“激活”我隐藏的相等但现在位于中心 div 右侧的那个。

Answer 1

如果您始终先设置较宽的内容，然后按顺序设置最后两个内容，那么这种更改将对您有所帮助，并且可能会解决您的问题，因为当您没有足够的空间容纳较小的内容时，它们将属于第一个内容框。你明白了吗？

这样做，您可以将较宽的元素 float 到左侧，将另外两个元素 float 到右侧。只是不要忘记将其他两个元素向右浮动会颠倒它们的顺序，因此您需要稍微修改一下 html。