2

基本的に、私が持っているのは、「メイン コンテンツ」ブロックを含む HTML ページです。そのページのすべてのメインコンテンツは、私が持っている div に入ります。私が望むのは、その右側にもっと多くのものがある列を持つことですが、何をしようとしても、常にその下またはランダムな場所に移動してしまいます。これが私のページのコードです。誰かがそれを案内してくれるなら、それは素晴らしいことです。

HTML: http://pastebin.com/Hh2TNGdj CSS: http://pastebin.com/ZCEJkFmH

ありがとう。

4

4 に答える 4

1

あなたはおそらく近かった...新しいdivをの直後に配置#pagecontentし、それを右に浮かせ、次に#pagecontentdivを左に浮かべると、それらが並んで座ることができます。

次のコンテンツ (フッターなど) は、フローティング div と重ならないように適切にクリアする必要があることに注意してください。

于 2012-05-09T22:30:12.700 に答える
1

個人的には、HTML5 タグの使用に切り替えます。このようなことをする場合、次の行に沿ったコードを使用します (テストされていません):

    <div id="wrapper"> #wrap both sections in a container
        <section id="left">Left Section</section>
        <section id="right">Right Section</section>
    </div>

CSS の場合、次のようなことができます。

    #wrapper {
        width: 1000px;
        height: auto;
    }
    #left {
         width: 500px;
         height: auto;
         float: left;
     }
    #right {
          width: 500px;
          height: auto;
          float: left;
     }

覚えておくべきいくつかの重要なこと。パディングを追加する場合は、幅からそれを引きます (パディングが左右両方にある場合は、パディング x2 を引きます)。フッターに clear: both と入力します。

これがお役に立てば幸いです。

于 2012-05-09T22:35:40.390 に答える
0

ここにフィドルがあります：http://jsfiddle.net/n6D7U/

  • 新しい div #aside、
  • 両方の列が固定幅 (ここでは 700+20+240 ピクセル) で浮動しています。
  • 親にはフローティングの子しかないため、背景を押し下げるコンテンツがフローにないため、最後の CSS ルールがあります...
于 2012-05-09T22:30:37.160 に答える
0

私はこれがうまくいくと思います：

<div style="padding:20px;">
        <div id="pagecontent">
                <span class="main-content-font">
                            The title of this page goes in the gray box above. This is the homepage, you can put <u>anything</u> here  (the main content of your website
                            which has some neat features and explains what your site is about should go here)!<br />
                            <br>
                            Content, content, and more content!<br />
                            <br>
                            Try to make it fill up as much space as possible, making the page longer. Don't fill it with useless junk, just anything
                            you can think of that will benefit the page.
               </span> 
               <span class="whatever">
                    some things
               </span>
        </div>
</div>

試したことはありませんがmain-content-font、スパンを作成しても改行が追加されないため、whateverスパンはその右側に配置されます。

于 2012-05-09T22:35:07.893 に答える