我遇到了CSS自動高度和浮動div的問題

所以我有一個簡單的<div class="main">，我有一組6個較小的div。所有這些較小的div都設置爲float：left;至於創建一個小平鋪列表，然而這與我的汽車高度混亂，並且似乎不是'數'作爲div中的某些東西。請你能幫我糾正我的代碼，或者讓我知道是否有更好的方法！我遇到了CSS自動高度和浮動div的問題

CODE：

HTML：

<div class="main"> 
    <div class="service-items"> 
     <div class="service-item">WEB DESIGN</div> 
     <div class="service-item">SEO</div> 
     <div class="service-item-right">WEB GUIDANCE</div> 
     <div class="service-item">GRAPHIC DESIGN</div> 
     <div class="service-item">BROCHURE DESIGN</div> 
     <div class="service-item-right">CONTACT ME!</div> 
    </div> 
</div>

CSS：

.main { 
    width:930px; 
    height:auto; 
    margin-right:auto; 
    margin-left:auto; 
    font-family: 'Roboto Condensed', sans-serif; 
    padding:10px; 
} 

.service-items { 
    width:930px; 
    height:auto;  
} 

.service-item { 
    width:200px; 
    height:90px; 
    padding-top:90px; 
    margin-right:15px; 
    text-align:center; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size:150%; 
    background-color:#69F; 
    display:block; 
}

來源

2013-11-26 user3034126

沒有......你的代碼表明任何被浮動的東西。 – Ming

添加http://jsfiddle.net/yEvH6/請參閱並解釋您想要的內容 –

您想要做什麼 – stanze

浮動元素確實不會增加家長的高度。有一堆clearfix-hacks可以解決這個問題，即更復雜的情況（即，溢出隱藏可以防止顯示其他重疊元素，例如自定義工具提示）。

在你的情況下，一個簡單的overflow: hidden應該做的伎倆。

.service-items { 
    width:930px; 
    height:auto; 
    overflow: hidden; // Set this 
}

來源

2013-11-26 08:45:10 MildlySerious

謝謝！偉大的幫助:) – user3034126

我遇到了CSS自動高度和浮動div的問題

回答

相關問題