css - いくつかのdivを一列に並べる方法は？

Question

私はそれらの間に改行なしで2つのdivを配置しようとしています。

これはhtmlです：

        <div id="header">
            <div id="logo"></div>

            <div id="left">
                <div id="slideshow"></div>
            </div>

        </div>

これはCSSです：

    #header {
    background-color: #13768a;
    width: 962px;
    height: 207px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
}


#logo {
    background-image:url('logo.png');
    height: 207px;
    width: 250px;
    margin-right: 0px;
    padding: 0px;
    }

    #left {
    width:712px;
    height: 207px;
}

#slideshow {
    background-color: #137387;
    width: 686px;
    height: 144px;
    margin-right: auto;
    margin-left: auto;
}

問題は、私がそれをこのように見せたいということです： 私はそれをどのように見せたいか

しかし、それはこのように見えます： それはどのように見えるか

Answer 1

これは、displaystyleプロパティによって制御されます。通常、div要素はを使用しますdisplay: block。同じ水平線上に配置する場合はdisplay: inline、または代わりに使用できます。display: inline-block

inline-block（ライブコピー|ソース）の使用例：

CSS：

.ib {
  display: inline-block;
  border: 1px solid #ccc;
}

HTML：

<div class="ib">Div #1</div>
<div class="ib">Div #2</div>

Answer 2

floatCSSプロパティを導入します。CSSを以下のように変更し#logoます#left。

#logo {
  background-image:url('logo.png');
  height: 207px;
  width: 250px;
  margin-right: 0px;
  padding: 0px;
  float:right;
}

#left {
  width:712px;
  height: 207px;
  float:left;
}

---

MDNドキュメントから、

float CSSプロパティは、要素を通常のフローから取得し、そのコンテナの左側または右側に沿って配置する必要があることを指定します。ここで、テキスト要素とインライン要素がその周りをラップします。

Answer 3

Div要素は通常display:block、要素の前後に改行を強制するために使用します。改行を削除する場合は、display:inline要素を水平方向に表示するを使用できます。divのdisplayプロパティをに作成するdisplay:inlineか、水平方向に表示display:inline-blockします。

Answer 4

この方法を試してください：

#logo {
    background-image:url('logo.png');
    height: 207px;
    width: 250px;
    margin-right: 0px;
    padding: 0px;
    float:right;}

#left {
    position:relative;
    width:712px;
    height: 207px;
}

#slideshow {
    position:absolute;
    top:20px;
    left:20px;
    background-color: #137387;
    width: 686px;
    height: 144px;
    margin-right: auto;
    margin-left: auto;
}​

基本的に、ロゴを正しく配置するためにロゴを配置してから、divとdivfloat:right;に追加します。このようにして、と属性を調整して、スライドショーを好きな場所に配置できます。position:relative#leftposition:absolute#slideshowtopleft

Answer 5

display:inline使用する必要のあるcssスタイルです。