带有浮动的嵌套元素的布局

Question

我正在尝试创建图中所示的布局。借助部分答案，最后一个问题似乎是"items in a column"。该块已就位，但项目列表并未从顶部开始。从 ul 中删除 margin-top 并没有帮助。我认为它受到 "title" "user".

段落的影响

在 fiddle https://jsfiddle.net/L0rzj4t8/2 中查看此 HTML 内容的最新结果。

那么，如何实现图片中的布局呢？

<div id="banner" style="background:grey">

<div id="left_block" style="float:left;width:140px">
    <ul style="list-style:none">
    <li><img border="0" alt="a logo" style="height:60px;width:60px"></li>
    <li>A logo</li>
    <li><input id="find" type="text" size="12"></li>
    </ul>
</div>

<div id="center_block" style="margin-left:150px;width:400px;">
    <p id="center_top">
        <span style="float:left">A Title</span>
        <span style="float:right">user name</span>
    </p>
    <ul id="center_bottom" style="list-style:none; float:left; width:100%">
    <li class="option"><a href="">Option 1</a><li>
    <li class="option"><a href="">Option 2</a><li>
    <li class="option"><a href="">Option 3</a><li>
    <li class="option"><a href="">Option 4</a><li>
    <li class="option"><a href="">Option 5</a><li>
    </ul>
</div>

<div id="rigth_block" style="margin-left:550px;width:150px;">
    <ul id="items" style="list-style:none;padding-top:0px">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
</div>

</div>

Answer 1

您可以按百分比或 px

增加#center_bottom 宽度

Answer 2

使用显示 table 属性你可以实现这个结构。请找到下面的代码和演示 link。注意：您的中间底部 LI 未正确关闭。

CSS

#banner{
        background:#696969;
        display: table;
        margin: 0 auto;
        border-spacing: 10px;
        border-collapse: separate;
    }
    #left_block{
        width:140px;
        display: table-cell;
        vertical-align: top;
        border: 2px solid #000;
        padding: 10px;
    }
    #left_block ul{
        padding: 0;
        margin: 0;
    }
    #center_block{
        width:400px;
        display: table-cell;
        vertical-align: top;
        border: 2px solid #000;
        padding: 10px;
    }
    #rigth_block{
        width:150px;
        display: table-cell;
        vertical-align: top;
        border: 2px solid #000;
        padding: 10px;
    }
    #center_bottom{
        list-style:none; 
        width:100%;
        padding: 0;
        margin: 0;
        display: inline-block;
        text-align: center;
    }
    .option {
        display:inline; 
        padding-left:4px;
        padding-right:4px;
    }
    .clear{
        clear:both;
    }
    #items{
        list-style:none;
        padding: 0;
        margin: 0;
    }

HTML

<div id="banner">

    <div id="left_block">
        <ul style="list-style:none">
        <li><img border="0" alt="a logo" style="height:60px;width:60px"></li>
        <li>A logo</li>
        <li><input id="find" type="text" size="12"></li>
        </ul>
    </div>

    <div id="center_block">
        <p id="center_top">
            <span style="float:left">A Title</span>
            <span style="float:right">user name</span>
        </p>
        <ul id="center_bottom">
            <li class="option"><a href="">Option 1</a></li>
            <li class="option"><a href="">Option 2</a></li>
            <li class="option"><a href="">Option 3</a></li>
            <li class="option"><a href="">Option 4</a></li>
            <li class="option"><a href="">Option 5</a></li>
        </ul>
    </div>

    <div id="rigth_block">
        <ul id="items">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
    </div>
</div>

DEMO （将 jsfiddle link 更新为最近的 version.koriander）

带有浮动的嵌套元素的布局

layout of nested elements with float

css

css-float