Question

我尝试使用更高分辨率的2个浮动DIV构建布局，而不会在小分辨率上浮动。一个（子导航）具有固定宽度和一个（内容）具有最大宽度。

这是HTML的示例代码：

<div id="subnavigation">
   lorem ipsum...
</div>
<div id="content">
   lorem ipsum...
</div>

这里是CSS：

#subnavigation {
   float:right;
   width:320px;
}
#content {
   max-width:730px;
}
@media only screen and ( max-width:800px ) {
   #subnavigation, #content {
      float:none;
      width:auto;
   }
}

我现在的问题是我需要在没有浮点数的内容下面的子导航。有人有个主意吗？我尝试了一下CSS中的calc（）以获得内容的固定宽度（能够浮动），但它在我的android手机上并没有真正起作用。

Answer 1

您可以使用一些negative margin sorcery。

这是一种接近它的方法（可能有点过于复杂）

HTML

<div class="page">
    <div class="content-wrapper">
        <div class="content">
            ..content..
        </div>
    </div>
    <div class="sidebar">
        ..content..
    </div>
</div>

CSS

.page {
    width:1050px; /*320px + 730px*/    
    max-width:100%;
    margin:0 auto;
    background:grey;
}

.content-wrapper {
    float:left;
    width:100%;
}

.content {
    margin-right:320px;
    background:orange;
}

.sidebar {
    float:left;
    width:320px;
    margin-left:-320px;
    background:green;
}

@media (max-width:480px) {
    .content-wrapper {
        float:none;
        width:auto;
        margin-bottom:20px;
    }
    .content {
        margin-right:0;    
    }
    .sidebar {
        float:none;
        margin:0;
        width:auto;
    }
}

小提琴：http://jsfiddle.net/Varinder/vV4LT/

浮点数和最大宽度的问题

1 个答案: