两个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内

回答

相关问题