我試圖浮動使用CSS列，以便它們堆起來像均勻地在這個博客上左右逢源：http://typeneu.com 浮動欄的JavaScript

似乎使用CSS，所以我期待中的JavaScript是不可能的。

上面列出的網站使用這個JavaScript文件：http://typeneu.com/wp-content/themes/grid-a-licious/scripts/grid-a-licious.js

我試圖實現它的實驗，但它似乎並不奏效。

有關此主題的教程的任何鏈接或使其與JavaScript或CSS一起使用的建議？

編輯：我想列的數量與屏幕分辨率靈活。

來源

2009-01-06 user51858

的JavaScript文件實際上是這個主題的一部分：

http://suprb.com/grid-a-licious/

這並不難在CSS做不過來。你只需要使用浮動。

例如：

<div style="float:left">Hello</div> 
<div style="float:left">I'm also saying hello</div> 
<div style="clear:both;"></div> 
<div style="float:left">Hi again</div> 
<div style="float:left">From the second line, that too!</div> 
<div style="clear:both;"></div>

明白我的意思嗎？ :)

來源

2009-01-06 00:21:57 Salty

-1：沒有明確寬度的浮動元素是邪惡的。 – Triptych 2009-01-06 00:24:07

採取的一點。我已經知道了，但我想我應該提到這一點，以防萬一有人閱讀它也不知道。：P – Salty 2009-01-06 01:04:41

我有一個網站，基本上具有設置像素寬度左DIV的浮動。根據分辨率和窗口大小，我可能有1-n列，你應該能基本：

<style> 
.myClass 
{ 
float:left; 
width:350px; 
} 
</style> 

<div class="myClass>my content</div> 
<div class="myClass>more content</div> 
<div class="myClass>even more content</div>

要使用JavaScript或者也許那裏得到列固定數量的我會假設你可以計算的寬度是另一個竅門。

編輯

好看着自己的JS文件，你需要確保你匹配你的class和id的匹配他們期待什麼樣子您的所有信息必須INA分度allposts的ID。

查看您鍵入的網站的HTML，並引用您的html以匹配他們的網站。

來源

2009-01-06 00:39:34 JoshBerke

問題在於，如果每個帖子有不同的高度，那麼當您轉到下一行時會留下空白處。因爲它全部填充了此示例：http://typeneu.com – user51858 2009-01-06 00:48:35

保持簡單。這應該是一個不錯的頁面...的CSS應該包括這個：

.header,.bod,.footer { width: 700px; margin: 0 auto; } 
.header { border-bottom: 3px solid #CCC; margin-bottom: 1.0em; } 
.footer { border-top: 3px solid #CCC; padding-top: 1.0em; } 
.first, .second, .third, .fourth { position: absolute; top: 0; left: 0;} 

.first { width: 100px; left:10px;} 
.second { width: 100px; left:110px;} 
.third { width: 100px; left:220px;} 
.fourth { width: 100px; left:330px;} 

.clear,.tall { position: relative; } /*\*/* html .clear{ display: inline;} 
.tall:after { content: ''; } /*fix of safari bug?*/

和一些HTML（身體裏面，你調用了CSS後）：

<body> 
    <div class="header">TITLE</div> 
    <div class="bod clear"> 
     <div class="first tall"> Lorem ipsum </div> 
     <div class="second"> Lorem ipsum </div> 
     <div class="third"> Lorem ipsum </div> 
     <div class="fourth"> Lorem ipsum </div> 
    </div> 
    <div class="footer" >FOOTER</div> 
</body> 
</html>

簡單，有效，正確的？

來源

2009-01-06 02:21:04 Alex

浮動欄的JavaScript

回答

編輯

相關問題