的容器如何定位彼此相邻两个div居中，它们中的一个在两个的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; 
    }

感谢。

来源

2013-03-20 a_ak

所以，你要第一个div居中，并有第二个div占用空间的权利。那是对的吗？ – 2013-03-20 21:35:36

yes | DIV1CENTERED | DIV2 ----- expand ------- | – 2013-03-20 21:37:01

检查了这一点：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之后挂起。

来源

2013-03-20 21:58:03 control

我在div1上使用width：200px（它应该是固定的）和第二个div的100％宽度。然后我得到了我正在寻找的东西。感谢您的帮助。并确保每个人都回答：D – 2013-03-20 22:12:45

这里是我使用的代码..需要一些黑客的IE浏览器，但它工作： http://jsfiddle.net/GTduj/5/ – 2013-03-20 22:22:35

只是给float:left你div1，并确保这一点：

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

所以，你想要的div2采取的空间休息，所以给双方的div百分比宽度即给DIV1 30％的宽度，和div2 70％的宽度。

看到这个fiddle

更新：

让您随心所欲的div1始终处于#container的中心，然后给它left:50%并相应调整div2

看到这个fiddle如果是你想要的。

来源

2013-03-20 21:39:26

div1未居中。这就是问题。它应该保持其中心位置和宽度。 – 2013-03-20 21:53:44

现在看到我的回答 – 2013-03-20 22:09:37

将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; 
}

来源

2013-03-20 21:41:16 olatunjee

假设你不希望在您需要从#div1.删除margin-left:auto;和margin-right:auto;左侧空白也需要改变#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/

来源

2013-03-20 21:44:38

这就是问题，div1应该保持它的居中位置和宽度。 – 2013-03-20 21:55:01

这是我知道要做到这一点的方式。也许别人可以通知我们两个更好的方法。

首先，硬编码的宽度在你的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/

来源

2013-03-20 21:48:50 Kolby

我的方法在ie8及以上版本以及所有其他浏览器中工作，严格使用css。
通过使用display：table然后display：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/

来源

2013-03-20 22:03:55 npage

如何定位彼此相邻两个div，它们中的一个在两个的div

回答

更新：

相关问题