浮动

Question

我正在尝试创建图片中显示的布局。在部分答案的帮助下，最后一个问题似乎是“列中的项目”。块位于适当位置，但项目列表不从顶部开始。从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>

Answer 1

使用display table属性可以实现此结构。请找到以下代码和演示链接。 注意：您的中心底部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链接到最近的版本.kianiander）

Answer 2

您可以按百分比或px

增加#center_bottom宽度