divs的問題

-3

下面有大約20個這些設置。每個人都包含一個圖像和2個鏈接我需要每個div中的鏈接堆疊並保持這樣的狀態，並且這些鏈接堆疊在帶有圖像的增長div下。divs的問題

這些設置中的每一個都需要彼此相鄰。所以所有的主包裹都會像對方漂浮在左邊那樣。

我該如何使它工作，我需要它？

如果我將主包裹設置爲width:100%個人包裹坐我如何需要他們，但然後主包裹佔用100%，我不能坐在旁邊等另一個主包裹。

我希望這是有道理的作爲即時通訊半睡半醒

HTML：

<div class="mainwrap"> 
<div class=" grow">image</div> 

<div class="individualwrap">link</div> 
<div class="individualwrap">link</div> 

</div>

CSS：

.grow { 
    display: inline-block; 
    margin: 0 auto; 
    height: 177px; 
    width: 100px; 
    overflow: hidden; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
}

我表現的圖像顯示我的想法

www.techagesite.com/idea.png http://www.techagesite.com/idea.png

來源

2014-05-21 Techagesite

你需要什麼樣的瀏覽器支持？ –

好吧，但如果你已經嘗試過，告訴我們它不僅如何工作，而且還不僅僅是你想要的。 – Daniele94

從來沒有聽說過css列，所以我怎麼才能找到它們。在我所有的搜索過去的2個月裏，我從來沒有登陸過css專欄的頁面。如果我可以做一個搜索，並在答案的頁面上結束，那麼我不會在這裏。 – Techagesite

我已經漂浮了可以有框顯示的mainwrap元素。我也將div與中心的鏈接對齊。結果可以在這個小提琴找到。（對於圖像，我舉了一個例子，它顯示的更好，然後只是一個文本）。

jsFiddle例如。

.mainwrap { 
    float: left; 
} 
.grow{ 
    margin:0 4px; 
    height: 177px; 
    width: 100px; 
    overflow:hidden; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
} 
.individualwrap { 
    text-align: center; 
}

如果您希望.individualwrap的行爲與按鈕相同，則將其設置爲按鈕。在互聯網上有足夠的例子可以使用，如this one。

來源

2014-05-21 07:37:54 KarelG

正是我需要感謝堆:) – Techagesite

回答

相關問題