兩個div/uls並排放置在絕對定位的div內

我有一個像通知容器一樣下降的容器，我想在絕對定位的div內並排放置兩個酒吧。我不想必須定義寬度，因爲每個div裏面都需要調整寬度（因爲是否存在滾動條）兩個div/uls並排放置在絕對定位的div內

問題很奇怪，當.notification-wrapper具有絕對或相對定位.left和.right divs不會並排排列，但是當我從.notification包裝器中刪除絕對/相對...（我確實需要relative/absolute來應用於notification.wrapper）

以下是我的：

<span class="notification-wrapper"> 
<div class="notification-container"> 

<div class="left">LEFT</div> 
<div class="right">RIGHT</div> 

</div> 
</span> 




.notification-wrapper { 
height: 32px; 
width: 25px; 
margin-right: -12px; 
margin-left: -12px; 
padding: 0px; 
font-size: 0px; 
position: absolute; 
left: 50%; 
top: 15px; 
right: 50%; 
} 
.notification-wrapper .notification-container { 
font-size: 12px; 
background-color: #FFF; 
height: 100px; 
position: absolute; 
top: 25px; 
} 
.notification-container .left { 
vertical-align: text-top; 
display: inline-block; 
background-color: #63F; 
width: 50px; 
} 
.notification-container .right { 
vertical-align: text-top; 
display: inline-block; 
background-color: #FFC; 
width: 120px; 
}

來源

2012-01-05 Dylan Cross

你能發佈的CSS，你有沒有試過？ – Jacob 2012-01-05 04:06:29

那麼，我現在所擁有的只是右欄和左欄顯示：inline-block;垂直對齊：文本頂部; – 2012-01-05 04:08:41

贊[this]（http://jsfiddle.net/LyLGX/）？ – 2012-01-05 04:10:45

那。由於沒有任何東西強制您的兩個元素並排居住的最小尺寸可以得到的是，如果它堆疊的元素，而不是。

我想，既然你使用inline-block（而不是float），你可以使用white-space: nowrap在容器上，以迫使這兩個inline-block元素不換行。你可能會想爲元素的內容設置white-space回normal。

此外，span元素是div的內聯版本，並且不允許塊級元素作爲子元素。

來源

2012-01-05 05:55:36 powerbuoy

啊謝謝，這完美的作品。 – 2012-01-05 06:00:08

很高興工作！ – powerbuoy 2012-01-05 06:06:40

您可以幫助其他用戶更輕鬆地找到正確的答案。 – powerbuoy 2012-01-05 06:20:58

我不知道你的代碼，請因爲當你位置的元素它「收縮包裝」，這意味着它縮小到它的最小尺寸試試這個代碼

.absolute-positioned{ overflow:hidden; float:left; width:auto;} 
.absolute-positioned ul{ width:auto; list-style:none;display:inline-block; } 
.absolute-positioned ul li{ display:inline-block; list-style:none; line-height:auto;} 
.absolute-positioned ul.left-bar{ float:left; width:auto;} 
.absolute-positioned ul.right-bar{ float:right; width:auto;}

來源

2012-01-05 05:14:12

試試這個

從.notification-wrapper
刪除width:25px從.notification-wrapper .notification-container刪除position:absolute和top:25px，而是使用padding-top:25px
變化right:50%在.notification-wrapper到left:50%

來源

2012-01-05 06:21:06

兩個div/uls並排放置在絕對定位的div內

回答

相關問題