如何在第三列

我有一個問題，在HTML + CSS創建3列創建HTML + CSS和組2 div元素3列如何在第三列

這是html代碼：

<div class="views-field-field-pdf-fid"></div>     
<div class="views-field-field-content-value"></div> 
<div class="views-field-field-image-fid"></div> 
<div class="views-field-title"></div> 
<div class="views-field-field-date-value"></div>

我要的是3列：

1st column: title, date-value 
2nd column: image-fid 
3rd column: content-value, pdf-fid

到目前爲止，我試圖float:right屬性添加到content-value, pdf-fid and image-fid。不幸的是，我無法將內容價值和pdf-fid保留在同一列上。

ps。我可以在html代碼中交換div，但不能使用父div將它們分組。謝謝

來源

2011-02-02 aneuryzm

爲什麼你不能把他們分組在父母的div？這是我對這種佈局的解決方案。 – 2011-02-02 22:03:06

你不斷提及專欄。你爲什麼不用桌子？如果你不想使用一張桌子，你爲什麼想把它們與父母的分組合起來呢？ – MattoTodd 2011-02-02 22:05:33

@MattoTodd - 你打敗了我。尼斯。 – Dutchie432 2011-02-02 22:08:23

您將需要訂購的div並使用float:left/float:right和clear:left/clear:right的組合。也許在中間列使用絕對定位。

這樣的事情應該工作，如果title總是小於content：

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
      div { 
       width: 32%; 
       margin: 0 1% 0; 
       padding: 0; 
      } 
     </style> 
    </head> 
    <body> 
    <div class="views-field-field-content-value" style="background-color: #000; height: 300px; float: right;"></div> 
    <div class="views-field-title" style="background-color: #333; height: 100px; float: left;"></div>    
    <div class="views-field-field-image-fid" style="background-color: #666; height: 400px; position: absolute; top: 0; left: 33%;"></div> 
    <div class="views-field-field-date-value" style="background-color: #ccc; height: 100px; float:left; clear: left;"></div> 
    <div class="views-field-field-pdf-fid" style="background-color: #999; height: 100px; float: right; clear: right;"></div> 
    </body> 
</html>

來源

2011-02-02 22:07:43 jeroen

爲什麼不只是使用表？

<table> 
<tr> 
<td> 
    <div class="views-field-title"></div> 
    <div class="views-field-field-date-value"></div> 
</td> 
<td> 
    <div class="views-field-field-image-fid"></div> 
</td> 
<td> 
    <div class="views-field-field-content-value"></div> 
    <div class="views-field-field-pdf-fid"></div>     
</td> 
</tr> 
</table>

來源

2011-02-02 22:07:31 Dutchie432

不知道，如果你想對所有三列寬度相等，但這裏是爲你一個開始： http://jsfiddle.net/Xj6UC/

CSS：

#one { 
    float: left; 
    border: 1px solid green; 
} 
#two { 
    float: left; 
    border: 1px solid red; 
} 
#three { 
    float: left; 
    border: 1px solid blue; 
}

HTML：

<div id="three"> 
    <div class="views-field-field-pdf-fid">pdf</div>     
    <div class="views-field-field-content-value">content value</div> 
</div> 
<div id="two"> 
    <div class="views-field-field-image-fid">image</div> 
</div> 
<div id="one"> 
    <div class="views-field-title">title</div> 
    <div class="views-field-field-date-value">date value</div> 
</div>

來源

2011-02-02 22:08:19 ngen

如何在第三列

回答

相關問題