如何对齐可变宽度的div块？

Question

我有4个div块，我无法将它们的边缘对齐在同一条垂直线上。

    div {
        border-radius: 5px;
    }
    
    
    #header {
        z-index:1;
        position:fixed;
        height: 50px;
        width: 95%;
        background-color:#999966;
        margin: 0 auto;
        display:block;
    }
    
    .left {
        position:relative;
        float:left;
        width:10%;
        height:300px;
        background-color:#cccc00;
        margin-top:60px;
        margin-bottom:10px;
        
    }
    
    .right {
        position:relative;
        float:right;
        width:88%;
        height:300px;
        background-color:#66ffff;
        margin-top: 60px;
        margin-bottom:10px;
    }
    
    #footer{
        position:relative;
        height: 50px;
        background-color:#ff0099;
        clear:both;
        margin: 5px 0px 5px 0px;
    }

    	<div id="header"></div>
    		
    	<div class="left"></div>
    		
    	<div class="right"></div>
    	
    	<div id="footer"></div>
    	
  

结果如下：

如果我将标题的宽度更改为100％，则会通过以下div：

如何在同一边缘对齐未知宽度（取决于用户屏幕尺寸）的div块？

Answer 1

在这种情况下，将标题的width属性设置为100%会使它们对齐。请注意，100%仅在子项上没有边距或父项的填充时才有效。

.left和.right合在一起98%但由于.right设置为float:right;，它们仍会占据100%的全宽

如果你想同时重新缩放所有div，我建议你添加一个包含所有div的div并设置宽度。

修改

为了响应您的修改，请尝试将margin的{​​{1}}设置为body。

默认情况下，正文有一个边距，页脚并不介意，因为它的宽度是自动计算的，但是当明确地将标题的宽度设置为100％时，会强制它超出正文边距。

对于.left和.right也没有关系，因为一个向左浮动而另一个向右浮动。唯一剩下的就是你的标题，因为它有0它需要一个明确的宽度。由于身体的边缘，将其设置为100％将不起作用。所以去掉身体的边缘。

http://jsfiddle.net/guu6y0gc/

获得保证金是一个不同的问题，我建议以不同的方式构建布局。我已经建立了一个例子：

http://jsfiddle.net/guu6y0gc/2/

我在这里做的是将身体边距设置为position: fixed;，而不是将10px的宽度设置为100％，而是将其延伸到#header和left:10px之间。现在，只要right:10px上的left和right值相同，您仍然可以获得保证金。

Answer 2

请尝试以下操作： Demo

将标题width to 98%更改为left and right width is 98%

的总和

#header {
    z-index:1;
    position:fixed;
    height: 50px;
    width: 98%;
    background-color:#999966;
    margin: 0 auto;
    display:block;
}

Answer 3

<div style="min-width:100%;min-height:5%;background-color:Red"></div>
<div style="min-width:100%;min-height:90%;display:inline-block">
    <div style="min-width:30%;max-width:30%;height:100%;background-color:Black;float:left"></div>
    <div style="min-width:70%;max-width:70%;height:100%;background-color:green;float:right"></div>
</div>
<div style="min-width:100%;min-height:5%;background-color:Blue"></div>

Answer 4

从font-size开始需要一些宽度。 所以你必须定义

将这些额外的CSS添加到您的样式

#left, #right{
font-size:0;
float:left
}

所以内心，你可以定义font-size