0

以前はコンテンツを表示するためにテーブルを持っていましたが、ここの人々はテーブルを削除し、スタイルを改善するためにCSSフローティングを使用するようにアドバイスしました。

私はすべてに不慣れです。私の問題は、コンテンツとサイドバーがあることです。次のように表示したい

content           | Sidebar

しかし今、私が持っている現在のスタイリングでそれは次のように表示されています

content
|
Sidebar

訂正していただけませんか。

       <style type="text/css">

   .csscontent
    {

          margin-right: 500px;



    }

   .csssidebar
    {
        float: right;
        width: 500px;
        background: darkgreen;
       /*  height:500px; */



    }


</style>

追加した場合

  <div class="Content">
  all the content
 <div class="sidebar">
 <Image>
 </div>

コンテンツ内にサイドバーを追加すると、画像はコンテンツの下に表示され、右マージンは500pxになります。

コンテンツの外にサイドバーを追加すると、コンテンツの下に画像が表示されます。

  <div class="Content">
  all the content
  </div>

   <div class="sidebar">
   <Image>
  </div>

コンテンツとサイドバーの両方を並べて表示したい

4

7 に答える 7

2

HTMLファイルでは、最初にフローティング要素を設定し、次にフローティング要素なしを設定する必要があります。フローティング要素はウェブサイトの「レベル」全体をブロックし、フローティング要素は下に配置されるためです。

したがって、HTMLは次のようになります。

   <div class="sidebar">
   <Image>
  </div>
  <div class="Content">
  all the content
  </div>

それ以外はよさそうだ。

于 2012-04-05T16:51:10.170 に答える
1 
.content, .sidebar {
  float: left;
}

上記のように両方のdivを左にフローティングすると、両方がインラインで表示されます。

次に、各クラスに特定のスタイルを適用できます。.contentに幅を割り当てると、.sidebarが表示される場所が決まります。

于 2012-04-05T16:49:28.923 に答える
1

両方を左に浮かせて、互いに積み重なるようにします。

    .Content
    {
          margin-right: 500px; 
          float: left; 
    }

   .sidebar
    {
        float: left;
        width: 500px;
        background: darkgreen;
    }
于 2012-04-05T16:48:23.417 に答える
1

次のような.csscontentクラスにfloatを追加します

 .csscontent
    {
          margin-right: 500px;
          Float:left;
    }
于 2012-04-05T16:48:31.077 に答える
1

または、コンテンツをフローティングせずにサイドバーを右にフロートさせるだけの場合は、HTMLのコンテンツの上にサイドバーを配置する必要があります。

もちろん、クラス名を修正する必要があります...

于 2012-04-05T16:53:11.553 に答える
1

両方の要素のラッパーを追加できます。

<div id="wrapper">

  <div id="content">
      all the content
  </div>

  <div id="sidebar">
      <img/>
  </div>

</div>

div#wrapper {
     position:relative;
     overflow:hidden;
     width:800px;
}

div#content {
     float:left;
     width:600px;
} 

 div#sidebar {
     float:right;
     width:200px;
 }
于 2012-04-05T16:55:15.387 に答える
1

コードとデモについてはフィドルを参照してください

フィドル： http： //jsfiddle.net/g42x2/1/

デモ： http： //jsfiddle.net/g42x2/1/embedded/result/

SS：

ここに画像の説明を入力してください

于 2012-04-05T17:17:38.310 に答える