Question

我有这个HTML：

<div class="container">

    <div id="sidebar">
        <ul><a href="welcome.php">Create Offer</a></ul>
        <ul><a href="pending.php">Accept Offer</a></ul>
        <ul><a href="pending.php">Pending</a></ul>
        <ul><a href="pending.php">Completed</a></ul>
        <ul><a href="pending.php">Balance</a></ul>
        <ul><a href="pending.php">Support</a></ul>
    </div>

        <div id="items">
            Text
        </div>

</div>

这是css：

.container { 
margin: 0 auto;
background-color: white;
border: 1px  solid black; 
width: 1000px; 
}

#sidebar {
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}

.container #items {

width: 82%;
float: right;
background-color: red;
}

输出：http://puu.sh/l719c/52f182e1d2.png

为什么项目div不会显示在侧边栏旁边的空白处的容器中？

感谢。

Answer 1

当你浮动一个元素时，它移动到一边，让它后面的内容向上移动。

这意味着跟随 var comment = [AnyObject]() var createdAt = [AnyObject]() var paid = [AnyObject]() var startedAt = [AnyObject]() var state = [AnyObject]() var stripeId = [AnyObject]() var type = [AnyObject]()的内容（如果有的话）将紧挨着它。

你没有做任何让items在items旁边移动。

你需要向前漂移sidebar而不是sidebar向右漂移。

还要注意水平边距/填充，使元素的总宽度加起来超过100％。

另请注意，浮动元素不会限制其容器的高度，除非您do something about it。

我通常会期待flexbox对齐一行中的块，而不是浮点数。

Answer 2

我假设您希望侧边栏设置为浮动：左;。所以你可以定位＆＃34;项目＆＃34;在＆＃34;侧边栏旁边＆＃34;格。

Answer 3

你刚错过了一行。必须设置侧栏的浮动，以便其他元素可以使用空白区域。更改#sidebar的css如下。

#sidebar {
    float: left;
    margin-top: 0px;
    padding-top: 0px;
    width: 18%;
    background-color: #E3E3E3;
    height: 100%;
}

一个类中的多个div：

3 个答案: