Zurb фонд ДИВ Align вопрос

Question

я использую основу 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> 

Теперь проблема когда ДИВ отключена пустое пространство между ними должно быть использовано другими дивы, но это не происходит в моем случае, я знаю, я не хватает маленькую точку, но не могу получить его вот изображение проблемы Мне нужно, чтобы 4-й дивизор менялся ред налево, а третий ДИВ сдвигается автоматически, если второй ДИВ является display:none

Answer 1

ZURB -Ограничение (похоже, вы используете ion 4) не работает по умолчанию.

Что я обычно делаю, это создать класс .left {float: left !important;}. Если вы примените это к своему 4-му дивиду, он будет делать, как вы говорите.

Однако в зависимости от вашей причины для этого И БУДЬТЕ ЭТО ТОЛЬКО Полагали ОТНОСИТЬСЯ К DESKTOP/планшета/MOBILE или ВСЕ ТРИ, вы можете захотеть использовать @media запросов в таблице стилей, чтобы определить, где и когда.

Примеры:

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

** OR **

.left { 
float: left !important; 
} 

ТОГДА

<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> 

Answer 2

Попробуйте 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; 
} 

Answer 3

@jnelson спасибо за помощь, теперь я понял, что сила важна, так! я создал простое решение

.abc{ 

    float:left !important; 
} 

Это также правильно работает на всех типах устройств

Answer 4

Вы не должны быть изменения фундаментальной структуры, как столбцы размера или работы.

Вместо этого вы должны просто использовать разные классы. Если вы знаете, что один столбец будет отключен, и я предполагаю, что вы используете 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;