0

理解できないCSSの問題があります。これがマークアップです。

<!doctype html>

<html>
    <head>
        <meta charset="UTF-8" />
        <style type="text/css">
            .container { position: relative; background-color: purple; padding: 0; margin: 0; }
            .first { float: left; width: 10%; min-width: 100px; background-color: yellow; }
            .second { float: left; width: 10%; min-width: 100px; background-color: orange; }
            .third { float: left; width: 80%; background-color: lime; }
            .clear { clear: both; }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="first">first</div>
            <div class="second">second</div>
            <div class="third">third</div>
            <div class="clear"></div>
        </div>
    </body>
</hmtl>

私が抱えている問題は、ブラウザー ウィンドウを縮小するときに 3 番目の div をラップしたいが、新しい行にラップすると完全に展開 (100%) することです。私は近いですが、3 番目の div がラップすると、80% のプロパティが開始され、完全に展開できなくなります。ここで調整する準備ができているフィドルがあります。以下は、問題を視覚化する画像です。2 番目の画像では、ラッピングが行われたときに 3 番目の div が 100% 展開されていないことがわかります。

ここに画像の説明を入力

ここに画像の説明を入力

4

3 に答える 3

0

申し訳ありませんが、純粋な CSS ソリューションはありません。jQueryを使用...

window.resize にイベントをアタッチします。window.resize は常に更新されることに注意してください。そのため、メソッドを起動する前にサイズ変更が 0.5 秒間一定になるのを待つために、少し余分な関数が必要です。

マークアップ

<div>
    <div id="firstcont" style="float:left; display:inline-block;">
        <select></select>
        <select></select>
    </div>
    <div id="secondcont" style="margin-left:80px;">
        <input id="note" style="width: 99%;" /><br />
    </div>

</div>

Javascript:

$(window).resize(function() {

    //wait a half second for a consant resize reading before executing
    waitForFinalEvent(function(){

        var $textbox = $("#note");
        var textboxwidth = $textbox.width();

        //alert(textboxwidth);

        if(textboxwidth < 400)
        {
            //alert("resizing");
            $('#firstcont').css('float', 'none');
            $('#secondcont').css("margin-left", "0px");
        }
        else
        {
            $('#firstcont').css('float', 'left');
            $('#secondcont').css("margin-left", "80px");
        }
    }, 500, "some unique string");
});

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

ここで JSFiddle を参照してください: http://jsfiddle.net/eastonharvey/Nsgf8/2/

于 2013-02-06T20:56:04.957 に答える
0

クラス .first & .second の属性 min-width が問題です

削除すると、別の動作になります

于 2013-02-06T18:01:57.017 に答える
-1

これを試してください、
ここにフィドルリンクがあります

    .container {
    position: relative;
    background-color: purple;
    padding: 0;
    margin: 0;
    min-width: 400px;
}
.first {
    float: left;
    width: 10%;

    background-color: yellow;
}
.second {
    float: left;
    width: 10%;

    background-color: orange;
}
.third {
    float: left;
    width: 80%;
    background-color: lime;
}
.clear {
    clear: both;
}
于 2013-02-06T17:55:29.213 に答える