0

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

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

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

我能够使用“浮动”属性将主 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 并将其隐藏在 beetwen div 的中心和右侧。

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

4

1 回答 1

0

如果您总是先设置较宽的内容，然后按顺序设置最后两个，这样会很好，并且这种更改会帮助您并且可能会解决您的问题，因为当您没有足够的空间容纳较小的内容时，它们会掉落在第一个内容框下。你明白吗？

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

于 2012-07-24T17:28:14.710 回答