4個盒子彼此相鄰浮動

我試圖讓4個盒子相互浮動。出於某種奇怪的原因，他們不會工作，也不會對他們造型。4個盒子彼此相鄰浮動

這裏是我的HTML：

<section> 
    <article> 
     <div class="1-4-container"> 
      <p><strong>Lorem ipsum</strong></p> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 
     <div class="1-4-container"> 
      <p><strong>Lorem ipsum</strong></p> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 
     <div class="1-4-container"> 
      <p><strong>Lorem ipsum</strong></p> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 
     <div class="1-4-container"> 
      <p><strong>Lorem ipsum</strong></p> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 
    </article> 
</section>

這裏是我的CSS：

section { 
    width: 100%; 
} 
section article { 
    width: 1000px; 
    padding: 20px; 
    margin: auto; 
} 

.1-4-container, 
.2-4-container, 
.3-4-container, 
.4-4-container { 
    float: left; 
} 
.1-4-container { 
    width: 25%; 
} 
.2-4-container { 
    width: 50%; 
} 
.3-4-container { 
    width: 75%; 
} 
.4-4-container { 
    width: 100%; 
} 
.1-4-container p strong, 
.2-4-container p strong, 
.3-4-container p strong, 
.4-4-container p strong { 
    color: #4c4c4c !important; 
    font-family: Arial, sans-serif; 
} 
.1-4-container p, 
.2-4-container p, 
.3-4-container p, 
.4-4-container p { 
    color: #939393; 
    font-family: Arial, sans-serif; 
}

我個人認爲沒有錯的代碼，但它只是不適用出於某種原因在div上的樣式。

來源

2014-04-11 ibab

您的代碼無效。類和ID不能以數字開頭:)

http://jsfiddle.net/u99A6/1/

有一個字母爲一類名或ID修復問題的開始。

.hi1-4-container { 
    width: 24%; 
}

對於未來的參考，你可以使用http://jigsaw.w3.org/css-validator來驗證你的CSS來檢查任何問題。您也可以使用http://validator.w3.org/來檢查您的HTML是否存在任何驗證問題。這將幫助你調試你的代碼（不正確的CSS語法，或一個額外的</div>等）

來源

2014-04-11 06:59:27 Ming

只是一些建議，因爲不兼容的，我建議根本就沒有命名的都使用數字。 –

@MarcoGeertsma雖然我覺得數字在命名結構中有一些優勢，但我通常也會避免它。 – Ming

通常當我必須使用同一種類的多個名稱時，我通常會使用first_image，second_image或top_item。 –

如果divs浮動相鄰，那麼總寬度必須加起來爲100％。您目前將所有的div都增加到250％。

所以基本上你需要將每一種寬度25％

希望幫助！

來源

2014-04-11 07:00:43 KM123

不要使用數字選擇器（事業部，ID）前
只需使用字母

來源

2014-04-11 07:15:04 khurram

4個盒子彼此相鄰浮動

回答

相關問題