Question

如何在指定仅右侧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;
}

感谢。

Answer 1

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

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

Answer 2

您可以使用负边距来取消fixed元素的宽度，然后将固定宽度元素浮动到右侧。

.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>

Answer 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>

Answer 4

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

将两个div并排对齐？

4 个答案: