浮點嵌套元素的佈局

我試圖創建圖像中顯示的佈局。在部分答案的幫助下，最後一個問題似乎是「列中的項目」。該塊在位，但是項目列表不是從頂部開始的。從ul中刪除margin-top並沒有幫助。我認爲它受到「title」「user」段落的影響。浮點嵌套元素的佈局

看到小提琴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>

來源

2015-09-22 koriander

使用顯示錶屬性，你可以實現這種結構增加#center_bottom寬度。請找到下面的代碼和演示鏈接。注意：您的中心底部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鏈接最近version.koriander）

來源

2015-09-23 10:54:26

看起來不錯，除了「vertical-align：top;」的中心塊外。似乎沒有工作。「標題」，「用戶名」應該在最上面，選項應該保留在剩餘空間的垂直中間。第二個方面我可以用「邊緣頂端」來解決，雖然不太理想。實際上，我用另一種解決方案結束了，使用「display：inline-block」，實際使用一個表格作爲中心塊。原因是「標題」和「用戶名」有不同的高度，我需要它們底部對齊（這方面不是問題的一部分）。 – koriander

跨度後在p標籤內添加一個清晰的div，以便您可以通過填充/邊距來對齊標題/用戶。更新了jsfiddle中的代碼。看一看。 –

@koriander如果你喜歡這個解決方案，請投票:) –

可以按百分比或PX

來源

2015-09-22 10:02:57

我看到，隨着保證金左一起在中心和右邊的區塊固定了佈局的這個方面。剩下的一個問題是，right_block上的項目有一個頂部「填充」，我無法擺脫。 – koriander

浮點嵌套元素的佈局

回答

相關問題