0

CSS フロートを使用した素敵な 2 列のレイアウトが必要です。

列#1 160 px 列#2 100% (残りのスペース)。

Col#2 の div を最初に配置したいので、レイアウトは次のようになります。

<div id="header"></div>
<div id="content">
     <div id="col2"></div>
     <div id="col1"></div>
</div>
<div id="footer"></div>

この効果を得るには何が必要ですか？

4

5 に答える 5

1

上記のどちらも機能しません。

div#col2 {
    width: 160px;
    float: left;
    position: relative;
}

div#col1 {
    width:100%;
    margin-left: 160px;
}

これは、列2が左側のサイドバーとして表示され、列1がメインコンテンツとして表示されることを前提としています。

于 2008-09-27T20:26:44.157 に答える
0

質問は何年も前のものですが、将来の参照や同様のケースに対してこの有用な回答を提供します。

#col1マークアップの前に置く#col2と、LTR ラウアウトがある場合は右にフロートし (RTL レイアウトの場合は左にフロート)、他の col を指定できoverflow: hiddenます。

親 ( #content)overflow: hiddenも持つ必要があることに注意してください。

#content{
  overflow: hidden;
  padding: 20px 0;
  height: 100px;
  background-color: #cdeecd;
}

#content #col1{
  float: right;
  width: 160px;
  height: 100px;
  background-color: #eecdcd;
}

#content #col2{
  height: 100px;
  overflow: hidden;
  background-color: #cdcdee;
}
<div id="content">
     <div id="col1"></div>
     <div id="col2"></div>
</div>

于 2015-12-26T06:28:32.243 に答える
0

これを行うには、「float」CSS プロパティを使用する必要があります。ここで簡単な実装を確認してください。そして、ここでもう少し詳細な記事を見つけることができます

于 2008-09-27T20:22:45.913 に答える
0

このようなことができると思います。

div#col2 {
  padding-left: 160px;
  width: 100%;
}

div#col1 {
  float: left;
  width: 160px;
}

#col1これは の前に来ることに依存して#col2いるため、使用できなくなる可能性があります。

これはそうではありませんが、より長いことに依存し#col1ています:

#content {
  position: relative;   
}
div#col2 {
  width: 160px;
  position: absolute;
}

div#col1 {
  width: 100%;
  margin-left: 160px;
}

これにより、フッターが所定の位置に保持されます。

div#footer {
  clear: both;
}
于 2008-09-27T20:23:36.350 に答える