2

JavaScriptを利用したソリューションがありますが、純粋なCSSでこれを行う方法があるかどうかも知りたいですか？

状況

私はレスポンシブデザインに比較的慣れていません。以前は、レイアウトを実現するためにポジショニングなどにこだわっていました。特定の方法でサイズを変更する単純なレスポンシブヘッダーを作成しようとしています。

マイ・ジレンマ

ヘッダーはページ上部の高さ29pxのバーで、両端に29x29のボタンがあります。真ん中の右側のボタンに隣接するのは、最小幅を300にしたいが、ブラウザーの幅に合わせて拡張したいdiv（ページタイトル用）です。

キャッチは次のとおりです。このタイトルdivを左ボタンから引き離して、最大幅200pxのギャップを残します。ギャップの最大幅に達したら、タイトルdivを拡大し始め、右ボタンを押したままにします。以下を参照してください。

IMG

注：実験用にここにjsfiddleを作成しました

4

2 に答える 2

1

JSFiddle を変更し、JavaScript を少し追加して、あなたが探していると思われる効果を得ました。JS コードが何を達成しようとしているのかを正確に説明するコメントもあります。

基本的に、window.resize イベントにハンドラーをバインドし、ヘッダーで使用可能なスペースを計算し、幅を維持するためにタイトル コンテナーを追加または削除します。

于 2012-08-22T14:03:15.323 に答える
1

さて、これが私がこれまでに持っているものです。午前中に編集します（ちょっと疲れています）

これは間違いなく可能だと思いますが、javascript が必要です。200px のスペースを利用できるようにするには、スタイリングにそれを行うように指示する JavaScript または何らかのプログラミングが必要です。

 <!DOCTYPE html>
<html>
    <style>
        html, body { height: 100%; }
        #container { margin-top: 29px; }
        header { height:29px; margin: 0 49px; background-color:#999999; }

        #div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
        #div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
        #div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
        #div4 { height: 100%; background-color: yellow; display: inline-block;  float: right; }
    </style>
<body>
    <div id="container">
        <header>
            <div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div>
        </header>
    </div>
</body>
    <script>
        if (parseInt(document.getElementById("div2").clientWidth) >= 200) {
            document.getElementById("div2").style.width = "200px";
        }
    </script>
</html>

だから私が行った方法は、3つのdivを持つのではなく、4つを作りました-あなたが持っていた元の3つですが、あなたが考慮したい空白、よく開いたスペース、私はそのためのdivも作りました。また、ウィンドウが 200px の幅を超えると、その幅でロックされるように JavaScript も用意しています。残念ながら、私はまだ CSS を使いこなせていないので、まだ CSS を機能させる方法を見つけようとしています。誰かが私の回答を編集したい場合は、お気軽に。

指摘すべきもう 1 つのことは、JavaScript はナビゲーションが成長している場合には機能しますが、縮小する場合には機能しないということです。幅を 200px にロックするように設定しているため、ユーザーがウィンドウ サイズを縮小することを決定した場合に縮小できるようにする方法を実装しませんでした (回避する方法は} else { clientWidth = "100%"? ではないと思います)。これであなたが正しい方向に進むことを願っています。

于 2012-08-22T10:33:08.177 に答える