0

htmlとcssを使用してページレイアウトを作成しようとすると、ページにjQueryUIセレクター要素が含まれます

  • 持っていることを探しています

    <div id="content">
    <img id="grid" src="http://placehold.it/350x250"/>
</div>

画面の中央に配置され、ウィンドウの左、右、上、下の端から等距離に配置されます。

  • そして、8つの画像、4x2行xcolsレイアウトを含む左側のメニュー

    <div id="menu" style="width:150px;float:left;">
    <b>Stock images</b><br>
        <ol id="selectable">
            <li id="house.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="gherkin.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="water.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="tree.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="me.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="hey.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="wutang.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="test.png" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
    </ol>
</div>
<div id="content" style="float:left;">
    <img id="grid" src="http://placehold.it/350x250"/>
</div>

何らかの理由で#selectable、#selectalbe li要素の高さ寸法を調整できません。選択可能な要素は、要素によって妨げられてはなりませんgrid。
目的は、ハードコードされた値の代わりに可能な場合はパーセンテージを使用して、ページがさまざまなサイズのデバイスで正しくレンダリングされるようにすることです。
ヘッダーとフッターのdivの位置は問題ありません。
これで助けに感謝します！

これが現在のレイアウトのjsfiddleです ..http ：
//jsfiddle.net/TdNXD/10/ターゲットレイアウト、リンク

4

1 に答える 1

0

これは実際には微調整というよりもオーバーホールのようなものだったので、それを機能させるために私が行ったすべての変更を示すのは非常に長い答えになるでしょう. その中で、結果を参照してください。

http://fiddle.jshell.net/userdude/TdNXD/16/show/light/

そして編集可能なフィドル：

http://fiddle.jshell.net/userdude/TdNXD/16/

そして灰色の色調で：

http://fiddle.jshell.net/userdude/TdNXD/17/show/light/

http://fiddle.jshell.net/userdude/TdNXD/17/

今、あなたのコメントが示すように、あなたはimg右のコンテンツ領域の中央に配置しようとしています. 上記のフィドルでは、そのコンテンツ領域の真ん中にあります（div#main私が追加しました）。navしたがって、 の左側のの幅を考慮すると、次の#mainようになります。

http://fiddle.jshell.net/userdude/TdNXD/19/show/light/

http://fiddle.jshell.net/userdude/TdNXD/19/

imgすべてがカラーである場合、どちらのカラーの方がセンタリングが見やすいか:

http://fiddle.jshell.net/userdude/TdNXD/20/show/light/

http://fiddle.jshell.net/userdude/TdNXD/20/

上記には、私が気付いたわずかな問題が含まれています。ウィンドウのサイズを変更すると、poaddingが#menu狭くなります。つまり、右側の絶対幅がborder左側よりもわずかに広くなり#mainます。おそらく目立たないか、ほとんど目立たないでしょうが（おそらく6-10px）、言及したいと思いました。

その他の考慮事項:

  • IE7 と 8 ではレイアウトが壊れます。IE7 ではさらに悪化しますが、IE8 でもかなりひどい状態です。display: table私の考えでは、 、min-width、および (など) のようないくつかの特別なセレクターに対する IE のサポートの欠如がinput[type]根本的な原因ですが、どれを処理する必要があるかは確認していません。これらのバージョンをサポートする必要がある場合は、IE 条件付きスタイルシートを使用して IE7/8 の表示を「修正」することをお勧めします。これには、float手法 (推奨されませんが、実行可能) または (テーブル要素を震えさせる) のいずれかが含まれます。) replacing the semantic markup with actual

  • マークアップとスタイルシートを確認する必要があり、何よりも、私がデザインに取り入れたいくつかの決定事項を確認する必要があります。よりセマンティックになるようにマークアップを変更したので、以前あったものの代わりに、、、、などsectionのHTML5 要素が表示されます。また、適切だと思われる場合は、一部のコンテンツをタグで囲みました。私が今考えていることの 1 つは、技術的には段落テキストではないため、テキストもおそらくブロック内にあるはずだということです。およびについても同じことが言えますが、これらはおそらく機能のためにおよびの候補として適合します。asidearticlenavpStock Imagesh2Input URLGrid Dimensionsfieldsetlegend

  • #feedbackスタイルなど、使用されていない部分をフィドルから削除したことにも注意してください）。

  • またmin-width、 を含むいくつかの要素に を付けました#container。これは、「入力 URL」と「グリッド ディメンション」でレイアウトの整合性を維持したいという要望によるものinputです。本当にレスポンシブで、幅の広いものから狭いものまでレイアウトの整合性を維持したい場合は、サイズ固有のプロパティを使用して特定の幅でそれらをリフローする必要があります。

まあ、それはまだ長い答えでしたが、役に立てば幸いです。ご不明な点がございましたら、お知らせください。

于 2012-12-30T01:40:40.203 に答える