的容器如何定位彼此相鄰兩個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

回答

更新：

相關問題