0

基本的に、3 行を含む単純な Web ページ テンプレートを作成しようとしています。1 つ目は 2 つの列を含むヘッダーで、2 つ目は本体のみで、最後はフッターです。

コーディングに関しては、この種のレイアウトを行っています

<div id="wrapper">
    <div id="header">
        <header>
        </header>
        <div id="col2>
        </div>
    </div>
    <div="mainbody"></div>
    <footer></footer>

基本的に、私が今抱えている問題は、2 つの列を持つ最初の行に関するものです。基本的に、最初のものには写真があり、2番目のものにはたくさんのボタンがあります. 理想的には、ヘッダーを 100% 幅にして画面に合わせ、最初の列の内容を左側に、ボタンを右側に配置することです。2つの間に空白を残して。なので中身はいわば横にくっつきます。現時点ではfloat:left、最初の列の CSS を使用しています。float/align/position をいじっていますが、何も機能していないようです。

ですから、それに関するアドバイスをいただければ幸いです。

また、フッターに関して別の質問がありましたが、基本的にはどうすればいいのかわかりません。したがって、可能であれば尋ねるだけで、どこを見るべきかを案内します。

したがって、フッターについては、フッターとブラウザーの x 軸の間に画面に収まる空白があり、本体が伸びる場合、それが可能かどうか疑問に思っていました。今の私の体は中身の高さしかないからです。したがって、CSS に関する基本的な一般的なアドバイスは、スタイルを実装して画面に収まるようにするのに役立ちます。

4

3 に答える 3

0 
<div id="wrapper">
     <header>
       <div id="column1" style="float:left;">Image</div>
       <div id="column2" style="float:left;">Buttons</div>
      </header>

   <div class="mainbody">
     Content
   </div>

<footer></footer>

これを使って

于 2012-11-23T06:26:35.837 に答える
0

2 列のヘッダー

<div id="header">
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</div>

次に、必要な margin-left を 2 列目の div に追加します。2 つの列の間にスペースが作成されます

于 2012-11-23T05:47:55.023 に答える
0

次のように作成できるシンプルな構造です (ここに DEMO があります)

HTMLは

<div id="wrapper">
    <div id="header">
        <header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 />
        </header>
        <div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br>
        </div>
    </div>
    <div="mainbody">mainbody
    </div>
    <footer></footer>
</div>

そしてCSSは

#header{overflow:auto}
header{float:left}
#col2{float:right}

それがあなたを助けることを願っています:)

于 2012-11-23T06:45:16.217 に答える