更新

Question

如何将两个div放在一起，其中一个div在两个div的容器中居中

如何将第二个div直接放在第一个div旁边并使其扩展到右侧？

这是一个例子：

HTML：

<div id="container" >
    <div id="div1"> </div>
    <div id="div2"></div>
</div>

CSS：

  #container{ width: 100%;
              display:inline;
              height:60px;
              color:#000;
    }
    #div1{ margin-left:auto;
           margin-right:auto;
           width:200px;
           height:50px;
           background-color:#333;
    }
    #div2{ float:right;
           width:100%;
           height:50px;
           background-color:#ccc;
    }

感谢。

Answer 1

检查出来：http://jsfiddle.net/GTduj/2/

#container{ 
    width: 600px; 
    height:60px; 
    border:1px solid #bbb;
    text-align:center;
}

您的容器元素需要一个固定的宽度，并且您希望将其内容集中在其中。

#div1{        
    width:60%;
    display:inline-block;
    height:50px;     
    background-color:#333; 
}

div1可以是％宽度或固定，但它需要是内联块。

#div2{        
    display:inline-block;
     width:10%; 
    height:50px; 
    background-color:#ccc; 
    margin-right:0;    
    position:absolute;    
}

对div2使用内联块和绝对位置，因此它会在居中的div1之后挂起。

Answer 2

只需将float:left提供给div1，并确保：

width(div1) + width(div2) <= width(Screen)

所以，你希望div2占用剩余的空间，所以给两个div的百分比宽度，即给div1宽30％，div2宽70％。

请参阅此fiddle

更新

所以你希望div1始终位于#container的中心，然后给它left:50%并相应地调整div2

如果这是您想要的，请参阅此fiddle。

Answer 3

将div放在另一个带有margin的div中：auto意味着你占用了包含div的整个宽度。将div1放在另一个给出指定宽度的div中，然后在其中浮动div1。

<div id="container" >
  <div class="container">
    <div id="div1"> </div>
  </div>
  <div id="div2"></div>
</div>

.container{
  width: x%;
  float: left;
 }

#div2{
 float: left;
}

Answer 4

假设您不想在左侧显示空格，则需要从margin-left:auto;删除margin-right:auto;和#div1.。您还需要更改#div2宽度。

这样的事情：

#div1{
    width:200px; 
    height:50px; 
    background-color:#333; 
    float:left;
}
#div2{
    width:75%; 
    height:50px; 
    background-color:#ccc; 
    margin-right:0; 
    float:left;
}

然而，如果这是流动的，我也会将#div1宽度更改为百分比。像width:25%;这样的东西;如果您打算在两个div的左侧有空格，那么您需要在左侧添加div作为列。

http://jsfiddle.net/Dpcq4/12/

Answer 5

以下是我知道的方法。也许其他人可以告诉我们两种更好的方法。

首先，硬编码你的CSS中的宽度

#container{ 
    width: 600px; 
    height:60px; 
    color:#000;
}
#div1{
    float: left;
    width:200px; 
    height:50px; 
    background-color:#333; 
    margin-left: 200px;
}
#div2{
    float:left; 
    width:200px; 
    height:50px; 
    background-color:#ccc; 
    margin-right:0;
}

如果这不是一个选项，我相信它可能不会，另一个解决方案是使用javascript。我将在示例中使用jquery。

var container = $('#container1');
var div1 = $('#div1');

div1.css('margin-left', container.width()/2-div1.width());

http://jsfiddle.net/Dpcq4/9/

Answer 6

我的方法在ie8及以上版本中与所有其他浏览器一起使用并严格使用css 通过使用display：table然后显示：table-cell为它的子节点，它将两个元素保持在同一个表行中。

#container{ 
   width: 100%; 
   display:table; 
   height:60px; 
   color:#000;
}
#div1{
   margin-left:auto; 
   margin-right:auto; 
   width:200px; 
   height:50px; 
   background-color:#333;
   display:table-cell; 
}
#div2{
   display:table-cell;
   height:50px; 
   background-color:#ccc; 
   margin-right:0;
   float:left;
   width:100%; 
}

http://jsfiddle.net/Dpcq4/13/

如何将两个div彼此相邻放置，其中一个div位于两个div的容器中

6 个答案:

更新