中間列正在溢出

我被困在這個小小的單調乏味的問題上，我並排3列，中間列將文本溢出到第一列下方，並且是其他列的寬度的一半。我嘗試將左右欄設置爲％33.3寬度，並讓中欄自動照顧，沒有幫助。我嘗試將所有列設置爲未修復的％33.3。我刪除了所有填充和邊距以及所有內容，但不起作用。這發生在768px媒體查詢上。我上傳了一個包含查詢和其他圖片和文件的zip文件。 https://drive.google.com/file/d/0B3AQB2FIkek5b0FlazVuMjBPTzg/edit?usp=sharing 這裏是我正在談論的文字溢出的視覺中間列正在溢出

我在做什麼錯？

PS：只顧幫助768查詢:)

來源

2014-03-01 user1830833

後，您的浮動三盒/箱您的所有內容應該留在所述容器中。看看我搗鼓參考

http://jsfiddle.net/jaredczerew/L98hB/

/** CSS **/ 
body {  
background:#ccc; 
width:100%; 
} 
section { 
width:30%; 
float:left; 
} 
#two { 
padding:0 20px; 
} 



<body> 
<section>nly five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</section> 



<section id="two">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</section> 


<section>and scrambled it to make a type specimen book. It has survived not only five  centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</section> 

</body>

來源

2014-03-01 03:15:09

謝謝你一堆。我的邏輯出錯了:) – user1830833

沒問題，很高興我能幫忙:-) –

您可能會在column-count感興趣：

Fiddle

p { 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    -moz-column-count: 3; 
    -moz-column-gap:  20px; 
    column-count:   3; 
    column-gap:   20px; 
}

來源

2014-03-01 03:00:29 JunM

不知道你寫的這一欄功能，thx – user1830833

你是不是浮於中心柱，因此爲什麼文本被包裹到左側時，左側立柱浮動。

This should work

看你的代碼，有你可以調整清理乾淨，一點點的幾件事情。

您在定位列時提及ID的兩次。您不需要這樣做，因爲在出現的頁面上ID應該是唯一的，因此您只需要定位該元素：而不是#about #left，您只需要#left

您正在使用不同的樣式集對於每一列，其中一個會做：

.left-col, 
.right-col, 
.middle-col { 
    width:33.2% 
    float:left; 
}

3最後，你似乎被複制現有已生成的每一個樣式表。這是一種行之有效的方法，但是通過多次指定相同的信息，您最終可以爲自己做出大量工作。如果你這樣做，當你改變一種主風格時，風格的層疊特性不會對你有所幫助。相反，您需要在每個樣式表中處理每個屬性。

來源

2014-03-01 03:29:40 Timmah

中間列正在溢出

回答

相關問題