1

i am using zurb foundation for building website, but now i am facing a problem as follows

There are four columns in a row and one of them is not visible sometimes as per some conditions, the code is 

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

Now the problem is when the div is disabled the empty space between them should be used by other divs, but it is not happening in my case, I know, i am missing small point, but cant get it here is the image of problem I need the 4th div to be shifted to left, as 3rd div is shifted automatically, if 2nd div is display:none

enter image description here

4

4 に答える 4

1

@jnelson助けてくれてありがとう、今私は!importantの力に気づいたので、簡単な解決策を作成しました

.abc{

    float:left !important;  
}

これは、すべてのタイプのデバイスでも正しく機能しました

于 2013-08-25T12:55:21.273 に答える
1

ZURB-Foundation (バージョン 4 を使用しているように見えます) は、デフォルトではそのようには機能しません。

私が通常行うことは、.left {float: left !important;}クラスを作成することです。それを4番目のdivに適用すると、あなたの言うとおりになります。

ただし、これを行う理由と、これがデスクトップ/タブレット/モバイルまたはすべての 3 つにのみ適用@mediaされるかどうかに応じて、スタイルシートでクエリを使用 して場所と時間を指定することをお勧めします。

例:

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

** また **

.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>
于 2013-08-25T12:48:51.753 に答える
0

このフィドルを試してください

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-25T12:45:40.193 に答える
0

列のサイズや動作の基本構造を変更するべきではありません。

代わりに、異なるクラスを使用する必要があります。1 つの列が無効になることがわかっている場合は、これを行うために JavaScript を使用していると想定しています。次に、javascript を使用して適切な列幅を追加します。4 列ではなく 3 列がある場合 (1 列が表示されないため)、3 列に a を指定しsmall-4ます。この考え方により、2 つの列を処理することもできます ( small-6)。

絶対に 3 つの列を使用する必要がある場合は、変更する必要がある上記の投稿に同意します。

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

に

[class*="column"]+[class*="column"]:last-child {
float: left;
于 2013-08-26T10:58:37.817 に答える