固定 - 液体 - 固定レイアウト

StackOverflow https://stackoverflow.com/questions/1558761

質問

Iは、[修正] [液体] [修正]クロスブラウザ互換のレイアウトを持ってしたいと思います。

HTMLます：

body
  div#col-1
  div#col-2
  div#col-3

CSSます：

    #col-1 {
    width:150px;
    float:left;
    }
    #col-2 {
    width:100%;
    padding:0 150x;
    }
    #col-3 {
    positon:absolute:
    right:0;
    width:150px;
    }

これを行うには、この作業/より良い方法でしょうか？

役に立ちましたか？

解決 3

さて、それを得た： http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/ の

他のヒント

これは非常に簡単です。

ここではコードです。

<html>
<head>
<style type="text/css">
#left {
  float: left;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#right {
  float: right;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#center {
  /* margin with 10px margin between the blocks*/
  margin: 0 160px;
  border: 1px solid black;
  height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>

私の代わりに、絶対位置のフロートを使用しています。絶対位置の上にフロートを使用する利点は、あなたがその下Notherのdiv要素を置くことができ、フッターを言うことができますということです。そして、ちょうどそれを明確に与える：両方を、それが自動的にページの一番下に表示されます。

ここ

フッタを持つ例です。 
<html>
<head>
<style type="text/css">
#left {
  float: left;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#right {
  float: right;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#center {
  /* margin with 10px margin between the blocks*/
  margin: 0 160px;
  border: 1px solid black;
  height: 50px;
}
#footer {
  clear: both;
  margin-top: 10px;
  border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>

出来上がり！あなたの液体のレイアウトを持っています。

このチェックアウト： http://siteroller.net/articles/3-column-no-テーブル・ノーフロートする

しかし、いや、私はそれがうまくいくとは思いません。あなたの問題に対処するものの言っ記事内のリンクがたくさんあります。

興味がある場合は、

そして、私はそこに書かれているものを拡張します。

私はロバートの答えが好きです。私はまた、左、右、中央とフッターの周りにラッパーを追加します。ここで、私は "ページ" にIDを設定します：

<body> 
    <div id="page"> 
        <div id="left">Text</div> 
        <div id="right">Text</div> 
        <div id="center">Text</div> 
        <div id="footer">footer</div> 
    </div>
</body>

次に、あなたはまた、「ページ」のスタイルを追加することができます：

    #page {   
    min-width: 600px;   
    }
ユーザーがダウン非常に小さいサイズに彼らのブラウザを縮小した場合、

この方法では、コンテンツはまだ良いに見えます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top