Question

我正在处理的整个页面中我继续得到一个重复的布局错误，这个错误源于尝试左右浮动元素彼此一致。但是，在重新调整大小的浏览器时，float：right元素每次都会在float：left元素下折叠。

    #wrap {
        width: 100%;
        height: 100%;
    }

#main {
    float:left;
    max-width: 70%;
    max-height: 100%;
    margin-left:112px;
    padding: 20px;
}
#side {
    float:right;
    width:auto;
    max-height:100%;
    background-color:black;
    border-style:solid;
    border-width:2px;
    border-color:red;
}

我正在寻找的是了解哪种方法最适合尝试执行此格式。我也知道内联：格式化块策略，但我发现这种情况在我的情况下无效，也会产生新问题。

Answer 1

您应该在#main文本周围创建一个div。向左浮动一个，给它一个宽度，你的侧边栏。

*{
    box-sizing: border-box;
}

我已经为所有人添加了盒子大小。它包括宽度和高度的边框和填充。

http://jsfiddle.net/qmd9shu0/1/

Answer 2

您可以使用

内联块（css display property）（如果需要，可以使用适当的宽度和媒体查询进行响应）
Table-layout（广泛支持）
Flexbox（如果需要＆gt; ie8支持，则很好用）

Answer 3

首先，将sidemain-div放在main-div中是否有必要？如果没有，请将它们都作为包装器的直接子项。有了这个，您就可以通过位置属性设置这些元素的样式。

像这样：

#wrap {
    width: 100%;
    height: 100%;
}

#main {
    position: absolute;
}

#sidemain {
    position: absolute;
    right: 0;
    margin-left: 10px;
}

Resize上的简单布局问题

3 个答案: