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基础格对齐问题

回答

相关问题