html - 2 つの div を並べて表示する

Question

このフィドルを考えてみましょう: http://jsfiddle.net/nashabhu/WbJvP/。div次の sを並べて表示したいと思います。

<!--Sidebar--->
    <div class="schoolnav" style="margin-left: 20px; margin-top: 12px;">
        <ul>
            <li>General Information</li>
            <li>Features</li>
            <li>School Images</li>
            <li>Contact Information</li>
        </ul>
    </div>
   <!-- End Sidebar -->
    <!-- Container -->
    <div id="container">
      </div>

現在、次の画像のようになっています。

General Informationをと同じ行に表示したいAdd School。どうやってやるの？

編集 ：

一般情報テキストと同じ行に Add New School Block を取得したいだけです。どうやってやるの？ダニエル・イムズによる回答は機能しますがschoolnav、container. そのため、サイドバーは左側ではなく中央にあります。

Answer 1

これを行う 1 つの方法を次に示します。.schoolnav使用してページのフローから取り出し、 of に等しい値をposition:absolute;与えます。#mainmargin-leftwidth.schoolnav

jsフィドル

CSS

#shell {
    position:relative;
}
.schoolnav {
    position:absolute;
    width:200px;
}    
#main {
    width:788px;
    margin-left:200px;
}

HTML

に引っ越し.schoolnavました#shell

<div id="container">
    <div class="shell">
        <!--Sidebar--->
        <div class="schoolnav" style="margin-left: 20px; margin-top: 12px;">
        ...

代替方法

この種のことを行うためのもう 1 つの通常の方法はfloat:left;、両方の項目で使用し、それらの幅をパーセンテージに設定して、ページが上になるようにすることです。ただし、この方法の問題点はdiv、フロートをクリアするために最後に追加の要素 (または疑似要素の clearfix) が必要なことです。

Answer 2

jsfiddle の css でこれを試してみたところ、期待どおりに動作することがわかりました。

.schoolnav{float:left; margin-right:20px;}
#container { padding:0; overflow:hidden;}

あなたのために働くかどうかを確認してください。

Answer 3

float:left両方のdivタグに適用しwidth、合計が100%

例えば

.schoolnav {
  float:left;
  width:20%;
}

#container {
  float:left;
  width:80%;
}

Answer 4

次のいずれかを選択してください...

フロートの使用:

.container {
    overflow: hidden;
}
.container div {
    float: left;
}

インラインブロックの使用:

.container div {
    display: inline-block;
}

Answer 5

これを試して：

.schoolNav{
    float:left;
    display: inline-block;
}

#container{
     margin-left:150px;  /* increase this value if you want to */
     /* remove padding: 20px 0  */
}

Answer 6

これを試してください：

以下のCSSを追加

.schoolnav { float:left }
#container {
     margin-left:165px;
     padding:0px !important;
}

Answer 7

これで問題が解決します：

1- 次の行を CSS に追加します。

.schoolnav {display: inline-block;}
#container { padding:20px 0;display: inline-block;}

2- HTML で、クラスを持つ秒 の名前を変更するか、削除します。使用可能なすべての幅を使用し、.schoolnav DIV と 1 行に収まりません。CSS は 988 ピクセルの幅を定義し、HEADER 部分で初めて使用されます。ここでは、適切な幅を持つ別のクラスを使用します。これです：divshell

.
.
.
<div id="container">
 <div class="shell"> <!-- rename the class and use another width for it in your CSS -->
.
.
.

あなたの問題は解決されるはずです。

Answer 8

試す ：

<div></div> &nbsp; <div></div>