2つのCSS要素を隣り合わせに整える

Question

インラインブロックを使用して2つのdivを整列させようとしていますが、私はこれに奇妙な問題があります。私はfloatを試してみましたが、同じ問題がありました。ここで

は何が起こっているの例です：

彼らはそれぞれ、他の隣にする必要がありますが、それらがずれています。ここで

は私のCSSです！私は運:(おかげで、多くの異なるものを試してきたように、誰もがこれで私を助けることができるかどうか疑問に思う私はjsfiddleするためにいくつかのサンプルコードをアップロード

#content .articlehs h3 { 
    margin-top: 0px; 
    font-family: 'New Rocker', cursive; 
    background: url("../img/article_head.png") repeat-x; 
    border: 2px solid background: url("../img/asbg.png") repeat-x; 
    padding: 10px 20px; 
} 

#content .articlehs p { 
    background: url("../img/asbg.png") repeat-x; 
    padding: 10px 20px 20px; 
} 

#content .articlehs { 
    display: inline-block; 
    background: url("../img/asbg.png") repeat-x; 
    width: 50%; 
    margin-left: 10%; 
    margin-top: 10px; 
} 

#content .articleSidebar h3 { 
    margin-top: 0px; 
    font-family: 'New Rocker', cursive; 
    background: url("../img/article_head.png") repeat-x; 
    border: 2px solid background: url("../img/asbg.png") repeat-x; 
    padding: 10px 20px; 
} 

#content .articleSidebar p { 
    background: url("../img/asbg.png") repeat-x; 
    padding: 10px 20px 20px; 
} 

#content .articleSidebar { 
    display: inline-block; 
    background: url("../img/asbg.png") repeat-x; 
    width: 20%; 
    margin-left: 10%; 
    margin-top: 40px; 
} 

、 https://jsfiddle.net/sj851u5z/

Answer 1

私が正しくあなたの質問を理解していれば、あなたは自分の#content .articlehs宣言にvertical-align: top;を追加する必要があります。

#content .articlehs { 
    display: inline-block; 
    background: url("../img/asbg.png") repeat-x; 
    width: 50%; 
    margin-left: 10%; 
    margin-top: 10px; 
    vertical-align: top; 
} 

Answer 2

これらのボックスの上部を合わせるように求めている場合は、いくつか問題が発生しています。

あなたは記事とサイドバーにmargin-topの異なるサイズを持っています。私はこれらを同じようにしました。

centerタグは不要で、サイドバーでさらにタイプを押し込んでいます。とにかく推奨されていないので削除してください。pタグはCSSの中央に配置する必要があります。

inline-blockの要素を使用して互いに隣り合うことができますが、フロートがここに行くより良い方法です。だから私はあなたにアライメントを与えるために、記事とサイドバーの両方に浮動小数点を追加しました。

https://jsfiddle.net/sj851u5z/2/

Answer 3

使用フレキシボックス：私に

#content { 
    display: flex; 
    } 

    p { 
    text-align: center 
    } 

    #content .articlehs { 
    width: 50%; 
    margin-left: 10%; 
    margin-top: 10px; 
    } 

    #content .articleSidebar { 
    width: 20%; 
    margin-left: 10%; 
    margin-top: 40px; 
} 

https://jsfiddle.net/t35szgpc/1/