css - 带 float 的嵌套元素的布局

我正在尝试创建图像中显示的布局。借助部分答案，最后一个问题似乎是“一列中的项目”。块就位，但是项目列表不是从顶部开始。从ul中删除margin-top并没有帮助。我认为这受带有“标题”“用户”的段落的影响。



有关此HTML内容，请参见小提琴https://jsfiddle.net/L0rzj4t8/2中的最新结果。

那么，如何实现图像的布局？

<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>

最佳答案

使用显示表属性可以实现此结构。请找到以下代码和演示链接。
注意：您的中央底部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链接更新为最新版本。koriander）

关于css - 带 float 的嵌套元素的布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32713813/