如何在第三列

我有一个问题，在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

如何在第三列

回答

相关问题