造型圖像容器

我已經創建了自己的CMS，但是我的圖像概覽仍然混亂。目前，它看起來像這樣：情況：http://i47.tinypic.com/raaybt.jpg 造型圖像容器

我試圖做到這一點的結果（由這張照片用Photoshop） http://i47.tinypic.com/30ualbm.jpg

我怎樣才能達到的效果我上面貼？這裏是我的HTML代碼：

    <div id="main-content"> 
        <div class="tab-content default-tab" id="tab1"> 
         <div class="notification information png_bg"> 
          <a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a> 
          <div> 
           Hieronder ziet u een overzicht van alle afbeeldingen die momenteel geupload zijn. 
          </div> 
         </div> 

         <div id="afbeeldingen"> 
          <ul id="afbeeldingenlijst"> 
           <li> 
            <div class="afbeelding"> 
             <img src="http://placehold.it/150x150"/> 
             <a href="#">Verwijderen</a> 
            </div> 
           </li> 

           <li> 
            <div class="afbeelding"> 
             <img src="http://placehold.it/150x150"/> 
             <a href="#">Verwijderen</a> 
            </div> 
           </li> 
          </ul> 
         </div> 

        </div></div>

，這裏是我的CSS：

#main-content ul li { 
    width:200px; 
    float: left; 
}

在此先感謝（：

來源

2013-02-19 Michael Koelewijn

post full css ... – Sowmya 2013-02-19 10:35:25

這將是大約700行代碼。 – 2013-02-19 10:36:39

它可以是你沒有'ul {list-style：none}'？使用[jsfiddle]（http://www.jsfiddle.net）發佈示例。 – Morpheus 2013-02-19 10:42:14

內UL的元素浮動它會導致父元素的0像素的高度，所以你應該明確的是，浮動爲這個CSS添加到您的樣式表

.clearfix { 
     *zoom: 1; 
    } 

    .clearfix:before { 
     display: table; 
     content: ""; 
    } 

    .clearfix:after { 
     display: table; 
     content: ""; 
     clear: both; 
    } 

and <ul class="clearfix">...</ul>

使用這個類的所有父元素那些在該元素內的浮動元素（如果需要）

，也多了一個屬性與現有的屬性添加到LI刪除要點

li{ 
    ... 
    ... 
    list-style:none; 
}

或者乾脆你可以使用

overflow: hidden;的父元素（即UL）

來源

2013-02-19 10:45:36 Chandrakant

這工作！（：感謝一堆，現在我知道什麼是使用clearfix .. 最近很想知道這一點。 – 2013-02-19 10:48:02

也許你應該嘗試設置顯示屬性爲inline-block的而不是浮動：左。

來源

2013-02-19 10:47:17

我認爲你只需要清除你的設計中的浮動圖像元素。

最簡單的方法是將一個溢出屬性添加到父項，例如

.container { 
    overflow: hidden; 
}

這樣做應該所有的父元素增長ij的高度和容納它的浮動兒童沒有打破布局。

來源

2013-02-19 10:48:53

造型圖像容器

回答

相關問題