3

ブラウザーのサイズが変更されたときに、ラッパー div をフロートされた子 div (.box) の周りにしっかりとスケーリングできるかどうか疑問に思っていました。現時点では、ブラウザのサイズが変更された場合、4 番目の div は次の行に進みますが、ラッパー div はまだそこにあるかのように同じサイズのままですが、縮小して、残りの 3 つの div に完全に収まるようにします。それが理にかなっている場合...どうすればこれを達成できますか?

jsFiddle - http://jsfiddle.net/JCGj6/ 

<div class="showcase_wrapper">
   <div class="showcase" id="pt1">
      <div class="inner">
         <div class="box"> One </div>
         <div class="box"> Two </div>
         <div class="box"> Three </div>
         <div class="box"> Four </div>
      </div>
   </div>
</div>

.inner {
    position:relative;
}

.showcase_wrapper {
    margin:170px auto 0px auto;
    max-width:848px;
    position:relative;
}

.showcase {
    position:absolute;
    top:0;
    width:100%;
    min-width:424px;
    display:inline-block;
    white-space:normal;
    float:left;
    z-index:0;
    border:1px solid #ff0000;
    background:#ff000;
}

.showcase .box {
    position:relative;
    background:#ff0000;
    width:212px;
    height:173px;
    float:left;
    cursor:pointer;
}
4

3 に答える 3

0

要件に応じて、これにメディアクエリを使用できます。このように書く

@media all and (max-width: 848px) {
    .showcase .box{width:33.33%}
    .showcase .box:last-child{display:block;width:212px;float:none}
}

これをチェックしてくださいhttp://jsfiddle.net/NnZuR/1/

于 2012-09-21T11:30:42.707 に答える
0

最近この問題に遭遇しましたが、親要素が子要素をラップしているという印象を与える解決策を思いついたと思います。

http://jsfiddle.net/partypete25/JCGj6/2/

.showcase_wrapper {
    overflow:hidden; /* hides the large bottom border on the bottom row applied on .inner */
    position:relative;
}
.inner {
  display:inline; /* only way to have the div 'hug' it's child elements */
  border-bottom:1000px solid red; /* Any large number will do, or you can make it more precise if you have a set height on your child divs. */

}
.showcase .box {
    background:orange; /*require a background colour otherwise the bottom borders appear from previous rows when items flow onto multiple lines */
    display:inline-block; /*required for it's parents 'inline' display to work effectively. make sure your markup is edited so there is no white space between items */
}
于 2016-01-04T04:46:17.743 に答える
0

フロートをクリアする必要があります。そして、レイアウトの方法を決定し、両方ではなく、ポジショニングまたはフロートのいずれかを使用します。一方が他方をキャンセルします。

ここでは、.box div で float left を使用しています。

.inner {
    }

    .showcase_wrapper {
        margin:170px auto 0px auto;
        max-width:848px;
    }

    .showcase {
        top:0;
        width:100%;
        min-width:424px;
        display:inline-block;
        white-space:normal;
        float:left;
        z-index:0;
        border:1px solid #ff0000;
        background:#ff000;
    }

    .showcase .box {
        background:#ff0000;
        width:212px;
        height:173px;
        float:left;
        cursor:pointer;
}
span.clear
{
    display: block;
    width: 100%;
    clear: both;
}

http://jsfiddle.net/Kyle_Sevenoaks/NnZuR/

フロートを使用する場合は必要ないため、ポジショニングを削除しました。

マークアップに span.clear を追加して、フロートをクリアし、外側のボックスが内側の要素の寸法を尊重するようにしました。フロートをクリアするにはいくつかの方法がありますが、私はこの方法を好みます。span.clear はセマンティックであり、読みやすくするためです :)

ボックスの外側の境界まで伸びるボックスはデフォルトの動作であり、いくつかの JavaScript 計算で行うのが最適です。

$(window).resize(function() {
    var windowWidth = $(window).width();
    var actualWidth = $("#wrapper div").width();
    var calc = Math.max(actualWidth,Math.floor(windowWidth/actualWidth) * actualWidth);

    $("#wrapper").css({width: calc+"px"});
});

http://jsfiddle.net/Kyle_Sevenoaks/cq658/

于 2012-09-21T08:58:41.550 に答える