Question

我有一个像通知容器一样落下的容器，我希望在绝对定位的div中并排放置两个条。我不想定义宽度，因为每个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;
}

Answer 1

那是因为当你定位一个元素时它会“收缩包裹”，这意味着它缩小到最小的尺寸。因为没有什么强制你的两个元素并排存在它可以得到的最小尺寸是它是否堆叠了元素。

我认为，由于您使用的是inline-block（而不是float），因此您可以在容器上使用white-space: nowrap来强制两个inline-block元素不要换行。您可能希望将white-space设置回normal以获取元素的内容。

此外，span元素是div的内联版本，不允许将块级元素作为子级。

Answer 2

我不知道您的代码，请尝试使用此代码

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

Answer 3

试试这个

从width:25px

.notification-wrapper

从position:absolute移除top:25px和.notification-wrapper .notification-container，而不是使用padding-top:25px
将right:50%中的.notification-wrapper更改为left:50%

在一个完全定位的div内并排放置两个div / uls

3 个答案: