0

私のウェブサイトは develp http://hrcprojectconsulting.com/の下にありますが、これは私の解像度とサイズの画面で見ると問題なく見えます。

だから私は自分が何をしなければならないのか正確にはわかりません。そこには流動的なレイアウトがありますが、それらは画面全体を埋め尽くします。ただし、固定された css を使用すると、画面サイズと解像度によっては、水平スクロールバーが表示されることがありますが、これは発生してはなりません。

はい、はい、私はすべての読書を終えました。実際、私は非常に素晴らしいチュートリアルに従っています

http://www.netmagazine.com/tutorials/create-fluid-layouts-html5-and-css3#null

そして、私は著者が何をしているのかを理解しており、それは非常に簡単に思えたので、私はそれを自分でやろうとしました.最も簡単なステップで失敗しました.

私のHTMLは今（今日はフッターを追加しようとしましたが、フッターは一番下にとどまることも、コンテンツによって押し下げられることもありませんが、オーバーフローしますが、それは別の話です）

したがって、ここにhtmlがあります：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html>
    <head>
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
        <title>Website</title>
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
            <div id="content">
                <div id="left_content"></div>
                <div id="middle_content"></div>
                <div id="right_content"></div>
            </div>
        </div>
    </body>
</html>

そしてここにCSSがあります

#container  {
    width:1040px;
    margin:0 auto;
}
#header {

    height:50px;
    margin-bottom:20px;
}
#left_content {
    float: left;
    width:180px;

    min-height: 600px;
    margin-right:20px;
}
#middle_content {
    font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
    font-size:8px;
    float: left;
    width:640px;

    min-height: 600px;
    margin-right:0px;
}
#right_content {
    float: right;
    width:180px;
    margin-right:20px;
    min-height: 600px;
}


#footer {

  float: left;

  background: green;

  margin-top: 20px;

  margin-right: 10px;

  margin-left: 10px;

  clear: both;

  width: 1020px;

  height:200px;

}

そう; 著者に従って、私がやろうとしたことは、最も外側のラッパーコンテナーの変更を開始し、1040px を変更することでした。96%に。

私がそれをするとすぐに、ヘッダーとして表示される青いバーが約 400 px に縮小し、左側に移動しました。さらに、すべてのタブとボックスが表示される Web フォームは、ボタンに移動して完全に気に入らなくなりました。残りから、とても混乱します。

どうして？作者が自分のデザインでやっていたことを、なぜ自分がやり始められないのですか? 彼はその 96% の変化から始めました。

4

1 に答える 1

0

これは、1040px を 96% に変更すると、内部の浮動要素がより多くの「余地」を持ち、浮遊するためです。

96% > 1040px の場合、フロートは上に上がり、隣同士になります。

すべての子要素も % ベースにしてみてください。

于 2012-11-17T18:40:10.940 に答える