Question

假设我有一个三个div并排的部分，主div（中心）占据空间的50％，左边和右边占25％。

现在，我正在使用媒体查询以最佳条件在kindle portrait（600 x 1024）上显示网站。

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

我能够使用“浮动”属性将主要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并把它隐藏了beetwen div center和right。

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

Answer 1

如果你总是首先设置更广泛的内容，那将是很好的，顺序的最后两个，只是这个改变将帮助你，并可能解决你的问题，因为当你没有足够的空间容纳小的，他们将属于第一个内容框。你明白了吗？

这样做，您可以将较宽的元素浮动到左侧，将另外两个元素浮动到右侧。只是不要忘记将其他两个元素向右浮动将颠倒它们的顺序，所以你必须稍微处理你的html。

将之前位于“浮动属性”下的div放下

1 个答案: