并排对齐两个div？ [复制]答案

【问题标题】：Align two divs side by side? [duplicate]并排对齐两个div？ [复制]
【发布时间】：2014-11-12 17:41:13
【问题描述】：

如何在仅指定右侧 div 的宽度的同时并排对齐两个 div 元素？我希望右 div 具有固定宽度，左 div 占据剩余空间。

<div style="width:100%;"><div class="left">left div</div>
<div class="right">right div</div></div>
.left{
float:left;
background:green;
width:100%;
}
.right{    
background:red;
width:200px;
}

谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

float:right; 你的“正确” div，把它放在第一位：

<div style="height:100px; width:100px; background-color:red; float:right;"></div>
<div style="height:100px; background-color:blue;"></div>

【讨论】：

【解决方案2】：

您可以使用负边距来否定固定宽度元素的宽度，然后将固定宽度元素向右浮动。

.left{
    float: left;
    background: green;
    width: 100%;
    margin-right: -200px;
}
.right{    
    background: red;
    width: 200px;
    float: right;
}

<div style="width:100%;">
    <div class="left">left div</div>
    <div class="right">right div</div>
</div>

【讨论】：

【解决方案3】：

你可以使用 CSS calc 来做到这一点，并有很好的浏览器支持（http://caniuse.com/#feat=calc）：

.left{
    float:left;
    background:green;
  
    width: calc(100% - 200px);
}
.right{    
    background:red;
    width:200px;
  
    float: right;
}

<div style="width:100%;"><div class="left">left div</div>
<div class="right">right div</div></div>

【讨论】：

你可以这样做很好，但没有必要，而且会影响性能。
我认为选项越多越好。我确实喜欢你的解决方案 +1。

【解决方案4】：

要与彼此相邻的 div 对齐，您可以同时给它们 display: inline 或 display: inline-block 或 float: left，但您不能将 div 旁边的任何内容与 width: 100% 对齐。因为这基本上意味着您希望该 Div 占据整行。所以旁边没有什么可以解决的。通过将宽度更改为 100% 以外的值并同时提供两个 div float: left，您将完成您想要的 http://jsfiddle.net/6707pn01/

【讨论】：