Zurb基礎格對齊問題

我使用zurb基礎建設網站，但現在我如下Zurb基礎格對齊問題

有一排四列，其中一人是不可見的，有時按一定條件面臨的一個問題，代碼

<div class="row"> 
    <div class="small-3 columns">1 ... </div> 
    <div class="small-3 columns" style="display:none;">2 ... </div> 
    <div class="small-3 columns">3 ... </div> 
    <div class="small-3 columns">4 ... </div> 
</div>

現在，當格被禁用應該由其他的div使用它們之間的空白空間的問題，但它不是我的情況發生，我知道，我很想念小點，但不能得到它這裏是問題的形象我需要第四個div轉移編到左，爲第13 DIV自動過渡，如果第二次DIV是display:none

enter image description here

來源

2013-08-25 Ichigo Kurosaki

的ZURB - 基礎（看起來像你使用的是vers離子4）在默認情況下不起作用。

我通常做的是創建一個.left {float: left !important;}類。如果你將它應用到你的第四格，那麼它會按你說的去做。

但是取決於你這樣做的目的以及是否只應該適用於臺式機/平板電腦/手機或全部三個，你可能想使用 @media查詢樣式表指定的地點和時間。

例子：

@media (query goes here) { 
.row .columns:last-child { 
    float: left; 
} 
}

** **或

.left { 
float: left !important; 
}

THEN

<div class="row"> 
    <div class="small-3 columns">1 ... </div> 
    <div class="small-3 columns" style="display:none;">2 ... </div> 
    <div class="small-3 columns">3 ... </div> 
    <div class="small-3 columns left">4 ... </div> 
    </div>

來源

2013-08-25 12:48:51 jnelson

試試這個fiddle

HTML

<div class="row"> 
    <div class="small-3 columns">1 ... </div> 
    <div class="small-3 columns" style="display:none;">2 ... </div> 
    <div class="small-3 columns">3 ... </div> 
    <div class="small-3 columns">4 ... </div> 
</div>

CSS

div.columns 
{ 
    padding:10px; 
    background:#00bfff; 
    width:20%; 
    display:block; 
    float:left; 
}

來源

2013-08-25 12:45:40

很抱歉，但它沒有工作，如果div的是沒有zurb使用，那麼這個工作得很好，但zurb我仍然面臨着同樣的問題，以「浮動：正確'的空間被刪除，並在最後創造空白空間 –

@jnelson感謝您的幫助，我現在意識到的力量重要的是，這樣的！我已經創建了簡單的解決方案

.abc{ 

    float:left !important; 
}

這也工作正常在所有類型的設備

來源

2013-08-25 12:55:21

你不應該改變的列是如何大小或工作的根本結構。

相反，你應該只使用不同的類。如果您知道一列將被禁用，並且我假設您正在使用JavaScript來執行此操作。然後也使用JavaScript來添加適當的列寬。如果您有3列而不是4（由於其中一個不顯示），請給出三列small-4。這一思路還將允許您處理兩列（small-6）。

如果你絕對必須使用3列，我同意上面的帖子，你需要改變。

[class*="column"]+[class*="column"]:last-child { 
float: right;

到

[class*="column"]+[class*="column"]:last-child { 
float: left;

來源

2013-08-26 10:58:37 zmanc

Zurb基礎格對齊問題

回答

相關問題