Question

如何将两个具有自动宽度的div并排放置？左边的div应该优先考虑。以下是我的尝试：

<div id='div_1'></div>
<div id='div_2'></div>

#div_1
{
    display:inline-block;    
    float:left;    
    position:relative;
    width:auto;
}

#div_2
{
    display:inline-block;
    float:right;
    position:relative;
    width:auto;
}

编辑：为了清晰起见添加目标 - ＆＃39;目标是让第一个div能够自动进行自动调整。第二个div应该占据剩下的空间。＆＃39;

Answer 1

我相信你正在寻找像flexbox这样的东西，这种东西还不能很好地支持，我不会想。

另一种方法是使用display: table-cell和display: table将包含元素width: 100%配置为包裹元素。对于类似的案例，请参阅此问题：

https://stackoverflow.com/a/12650502/451969

它给你的东西是：

<div id='wrapper'>
  <div id='div_1'></div>
  <div id='div_2'></div>
</div>

#wrapper
{
    display: table;
    width: 100%;
}

#div_1
{
    display: table-cell;
}

#div_2
{
    display: table-cell;
}

http://jsfiddle.net/mDyjE/

Answer 2

流体布局依赖于％宽度值。这是你应该使用的。例如：两者都为50％。

此外，position: relative在这里似乎没必要。

Answer 3

我认为我的目标是让它们大小相同，并排。要执行此操作，请将宽度设置为约45％而不是自动。你使用45％，因为如果你使用50％，IE会将右边的div放在左下方。

#div_1
{
    display:inline-block;    
    float:left;    
    position:relative;
    width:45%;
}

#div_2
{
    display:inline-block;
    float:right;
    position:relative;
    width:45%;
}

两个自动宽度div并排

3 个答案: