3

[Fixed][Liquid][Fixed] クロスブラウザ対応のレイアウトが欲しいです。

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;
    }

これは機能しますか/より良い方法ですか？

4

4 に答える 4

4

これは非常に簡単です。

ここにコードがあります

<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>

絶対位置の代わりにフロートを使用しています。絶対配置の上にフロートを使用する利点は、その下に別の 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>

出来上がり！液体レイアウトができました。

于 2009-10-13T10:39:19.390 に答える
0

これをチェックしてください： http://siteroller.net/articles/3-column-no-tables-no-floats

しかし、いいえ、それはうまくいかないと思います。あなたの問題に対処するために、上記の記事にはたくさんのリンクがあります。

そして、興味があれば、そこに書かれていることを拡張します。

于 2009-10-13T07:51:56.790 に答える
0

わかりました: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/

于 2009-10-13T07:55:35.893 に答える
0

ロバートの答えが好きです。また、左、右、中央、およびフッターの周りにラッパーを追加します。ここでは、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;   
    }

このようにして、ユーザーがブラウザーを非常に小さなサイズに縮小しても、コンテンツは適切に表示されます。

于 2011-03-06T07:21:59.227 に答える