九列在列。如何設計這個？

我有九個div的是這樣的：九列在列。如何設計這個？

<div id="content"> 
    <div class="example"> 
     <h2>Lorem ipsum</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> 
    </div> 
</div>

如何如圖片所示安排他們（CSS）

enter image description here

來源

2013-06-01 Mimi Bubu

阿那webdesigners總是發送給我的理想情況的完美形象......如果一個塊是1號線高或短，會發生什麼？這些塊是否需要按列排列或標題保持在同一行？ – FelipeAls

@FelipeAls：你說得對，標題應該保持在同一行 –

你可以做到這一點在2種方式，1。 ..

使用display: inline-block;

Demo

.wrap { 
    width: 950px; 
} 

#content { 
    display: inline-block; /* Can also use floats, depends on you */ 
    width: 300px; 
}

使用column-count財產（這是不廣泛被支持）第二

Demo（演示可能看起來怪異一點，你需要使用CSS復位）

.wrap { 
    column-count: 3; /* This will cut your content in 3 pieces */ 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
}

來源

2013-06-01 20:34:02

你應該提到列數是嚴格的CSS 3，但思路很好。 – MarioDS

'（這還沒有得到廣泛支持）':) –

是的，你說，但如果你說它是CSS 3具體我只是認爲你是更完整/不太模糊:) – MarioDS

DEMO

篩選：

#content { 
    width:800px; /* adjust width to accommodate three colums */ 
    /* your other styles */ 
} 

.example { 
    width: 150px; /* adjust width */ 
    float:left; 
} 

.clear{ clear:both; }

您應該根據需要調整容器和9個div的width。

每組三個申報單後，你應該使用一個div clear:both（或搜索clearfix在谷歌作爲替代）是這樣的：

<div class="clear"></div>

來源

2013-06-01 20:33:08 Sarfraz

喜歡的東西...

HTML

<div class="left"> 
    <h2>Lorem ipsum</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> 
</div> 

<div class="middle"> 
    <h2>Lorem ipsum</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> 
</div> 

<div class="right"> 
    <h2>Lorem ipsum</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> 
</div> 

<div class="clear"></div>

CSS：

.left{ 
    float: left; 
    width: 33%; 
} 
.middle{ 
    width: 33%; 
} 
.right{ 
    float: right; 
    width: 33%; 
} 
.clear{ 
    clear:both; 
}

希望這會有幫助嗎？ :)

來源

2013-06-01 20:36:17

這將取決於你想要什麼寬度的內容，但我會把內容變成一個班，做3個內容div，並把每個3個例子div。然後，只需在示例divs上設置％年齡寬度並將它們左移即可。這裏有一個jsfiddle來演示。

CSS：

.example { 
    width: 33.33333%; 
    float: left; 
}

標記：

<div class="content"> 
    <div class="example"> 
     <h2>Lorum Ipsum</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> 
    </div> 
    <div class="example"> 
     <h2>Lorum Ipsum</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> 
    </div> 
    <div class="example"> 
     <h2>Lorum Ipsum</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> 
    </div> 
</div>

來源

2013-06-01 20:42:50 kinakuta

九列在列。如何設計這個？

回答

相關問題