HTML/CSS：浮動div高度和底部垂直對齊

我不能使用<div>和CSS float在jsFiddle鏈接中描述的HTML佈局。用table標籤我可以解決這個問題，但我需要DIV + CSS解決方案。這是可能的？任何人都可以幫忙HTML/CSS：浮動div高度和底部垂直對齊

HTML：

<div class="container"> 

<div class="column"> 

Some content!<br/> 
Some content!<br/> 
Some content!<br/> 
Some content!<br/> 
Some content!<br/> 

</div> 

<div> 

Something on top 

</div> 

    <div id="bottom-content" style="background-color: #FA0"> 

Something with vertical align = bottom AND height == height of left column 

</div> 

</div>

CSS：

.container { 
    overflow: hidden; 
} 
.column { 
    float: left; 
    background-color: grey; 
    padding-bottom: 1000px; 
    margin-bottom: -1000px; 
}

現場演示：jsFiddle

解決方案：

HTML：

<div class="container"> 

<div class="column"> 

Some content!<br/> 
Some content!<br/> 
Some content!<br/> 
Some content!<br/> 
Some content!<br/> 

</div> 

<div style="float:left; height:82px"> 

Something on top 

</div> 

    <div id="bottom-content" style="background-color: #FA0; float:left;"> 

Something with vertical align = bottom AND height == height of left column 

</div> 

</div>

CSS：

.container { 
    overflow: hidden; 
} 
.column { 
    float: left; 
    background-color: grey; 
    padding-bottom: 1000px; 
    margin-bottom: -1000px; 
}

來源

2012-09-19 SAS

你在做什麼佈置？如果它是一張數據表，那麼就使用表格。 – SpaceBeers

究竟是什麼樣的佈局呢？它是一個網站，一個充滿數據的表格嗎？這種問題已經被多次解答_嘗試在Google或StackOverflow上搜索「浮動佈局」或「兩/三列布局」。 – Kyle

您可以發佈所需輸出的視頻（如果需要，可使用表格創建屏幕截圖）。 –

-2

爲即時得到您的question.You需要在你的DIV給浮動

jsfiddle.net/tKnw9/12

檢查小提琴

來源

2012-09-19 10:41:21 supersaiyan

謝謝，但我需要多數民衆贊成橙色塊將低於白色塊。 – SAS

其下面只有...你想要灰色塊以下的塊 – supersaiyan

嗯...我想要這個：灰色塊到頁面的左側，白色塊到灰色塊的右側（與垂直對齊 - 頂部），橙色塊 - 灰色塊的右側，白色塊下方（垂直對齊 - 底部）。 – SAS

佈局（即， https://dl.dropbox.com/u/2325784/example_layout.png），可以用下面的代碼我想實現：

.container { 
    width:900px; 
    overflow: hidden; 
} 
.picture{ 
    float:left; 
    width:220px; 
} 
.column { 
    width:320px; 
    float: left; 
    background-color: grey; 
}

&的HTML是：

<div class="container"> 
    <div class="picture">Picture</div> 
    <div class="column"> 
     <table> 
      <tr> 
       <td>Genere</td> 
       <td>Arcade</td> 
      </tr> 
      <tr> 
       <td>Developer</td> 
       <td>Micheal A. Denio</td> 
      </tr> 
      <tr> 
       <td>Publisher</td> 
       <td>Micheal A. Denio</td> 
      </tr> 
      <tr> 
       <td>Released</td> 
       <td>1988</td> 
      </tr> 
      <tr> 
       <td>Platform</td> 
       <td>DOS</td> 
      </tr> 
      <tr> 
       <td>Rating 1</td> 
       <td>Rating Picture will goes here</td> 
      </tr> 
      <tr> 
       <td>Rating 2</td> 
       <td>Rating2 Pic will goes here</td> 
      </tr> 
     </table> 
    </div> 
</div>

如果你不想使用的表，你可以做到這一點與ul & li組合。

乾杯！

來源

2012-09-21 07:30:20

HTML/CSS：浮動div高度和底部垂直對齊

回答

相關問題