オブジェクトをインライン（ディスプレイ）に配置します

Question

したがって、私はCSSを使ってインラインディスプレイにいくつかのものを入れたいのですが、なぜそれが機能しないのか混乱しています。ここに私のコードは次のとおりです。

HTML

<div id = "allBody"> 
    <div id = "image"> 
    <img src = "https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id = "image"> 
    </div> 
    <div id = "line"></div> 
</div> 

私が欲しいものCSS

#allBody { 
    display: inline; 
} 
#image { 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    padding-right: 30px; 
} 
#line { 
    height: 200px; 
    width: 7.5px; 
    border-radius: 20px; 
    border: none; 
    background-color: cornflowerBlue; 
} 

は彼らが隣同士に表示させることです。コードの作業バージョンはhereです。また、私は電子署名作成者hereと同様のモデルに従っていますが、行を並べるなどしても、同じものにするつもりはありません。事前に

ありがとう：

は、ここで私はそれが（賢明少し異なるスタイリングを持つ）のように見てみたいものの種類の一例です！ #allbodyにdisplay: inlineの追加に加え

Answer 1

、あなたも#imageと#line（それらはあなたがインラインで表示したいお互いの兄弟であるとして）の両方に追加する必要があります。私もJSFiddleを作成しました

#allBody { 
 
    display: inline-block; 
 
} 
 

 
#image { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    /*padding-right: 30px; */ /* using padding distorts the image */ 
 
    margin-right: 30px; /* added */ 
 
    display: inline; /* added */ 
 
} 
 

 
#line { 
 
    height: 200px; 
 
    width: 7.5px; 
 
    border-radius: 20px; 
 
    border: none; 
 
    background-color: cornflowerBlue; 
 
    display: inline; /* added */ 
 
    float: right; /* added */ 
 
}

<div id = "allBody"> 
 
    <div id = "image"> 
 
    <img src = "https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id = "image"> 
 
    </div> 
 
    <div id = "line"></div> 
 
</div>

：これに加えて、あなたはまた、画像の右側に表示にそれを得るためにライン上float: rightが必要になりますこのhereです。

padding-rightではなく、画像にmargin-rightが含まれている可能性があります。 margin-rightを使用すると、青色の線がオフセットされますが、padding-rightは円形のプロファイル画像を歪ませます。

希望すると便利です。 :)

Answer 2

imgタグの周囲にあるDIVを削除するのが簡単な解決策です。画像はデフォルトでインラインで表示されます（同じIDを持つ2つの要素があるとHTMLが無効です）。display: inline-block;を#line要素：

（そして、ラッピングDIV #allBodyからinlineを削除）

#image { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    padding-right: 30px; 
 
} 
 
#line { 
 
    height: 200px; 
 
    width: 7.5px; 
 
    border-radius: 20px; 
 
    border: none; 
 
    background-color: cornflowerBlue; 
 
    display: inline-block; 
 
}

<div id = "allBody"> 
 
    <img src = "https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id = "image"> 
 
    <div id = "line"></div> 
 
</div>