2

私はHTML5/CSS3で新しいデザインに取り組んでいますが、最後にhtmlを使って作業したのは、レイアウトではなくコンテンツの作成よりも長い間です。

私が達成しようとしているのは、800pxまでのブラウザサイズに合うように「全幅」またはむしろ「80％幅」のデザインです。（最小幅）。

コンテンツの一部には、右側に配置されたナビゲーションブロックが含まれます（固定サイズ、たとえば300px）。「clearfix」の問題のためにfloatを嫌うことを学びましたが、floatを使用してこれを達成しました。 。

その左側では、コンテンツが右側のフローティング要素のスペースを占めるようにしたかったのです。

ただし、そのコンテンツが幅を超えて大きくなると、右側のフロート要素が押し下げられます。

だから次のようなもの：

   -----------------------------------------------------------
          |                 Header                    |
          |                <header>                   |
          |-------------------------------------------|
   <-10%->|         <- Fill ->            |<- 300px ->|<-10%->
          |                               |           |
          |         <section>             |  <aside>  |
   -----------------------------------------------------------

セクション（id = articles）は次のように設定されます：

margin: 0 0 0 30px;
display: inline-block;
float: left;

Aside（id = sidebar）は次のように設定されます：

margin: 0 30px 10px 30px;
width: 290px;   

border:1px solid #6B6B6B;

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;

box-shadow: 0px 0px 2px 1px #6B6B6B inset;

display: inline-block;
float: right;

それを修正する方法：

  • display：tableとtable-cellは機能しますが、避けたい余分なタグが追加されます。また、どこでも機能するかどうかわかりませんか？
  • フレックスボックス？まあそう思ったのですが、問題がありましたが、とにかく広くサポートされていません。
  • すべて固定幅にします。
  • すべてに動的な幅を持たせます。（ああ男の子）
  • テーブルですが、私たちはその議論がすべてうまくいくことを知っています。

現在、目標を達成できるのはそれだけなので、リストの最初のものを適切に処理することはできませんが、もっとクリーンな方法がなかったかどうかを確認したいと思います。

4

2 に答える 2

1

このようなものはどうですか？左右のピースのコンテナを作成します。適切なコンテナ用のスペースを確保するために、適切なマージンを提供します。あなたはそれを浮かせることができます、しかしあなたが浮かぶのが嫌いなので私は絶対にそれを配置しました=）。

http://jsfiddle.net/Z62f2/

div { border: 1px solid gray; width: }
#container { width: 80%; min-width: 600px; margin: 0 auto;  }
#header { height: 100px; }
#content { position: relative; }
#left { margin-right: 300px; height: 1000px; }
#right { width: 300px; height: 500px; position: absolute; top: 0px; right: 0px; }

<div id="container">
    <div id="header">Header</div>
    <div id="content">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>
</div>
于 2012-01-31T23:02:06.797 に答える
0

これを突き刺したいのですが、

これが、あなたがすでに持っているHTML内でそれをマークアップする方法です。基本的に、セクションと脇を含めるために別のdivを挿入しました。

<div id="contentContain">
    <div id="section"></div>
    <div id="aside"></div>
</div>

そしてCSS..

#contentContain {width: 80%; }
#section {float:left; width: 60%;}
#aside {float:left; width: 40%; }

このコードはあなたにもう少し見通しを与えるはずです、そしてそれは機能します、あなたは脇に「より多くの」コンテンツを持つことができ、それはレイアウトを壊しません。

頑張ってください！

于 2012-01-31T22:36:02.163 に答える