左の固定幅divと右のDisqus

Question

私は2つの要素を互いに隣に表示させようとしています。

footer {display: block;} 
#left {display: inline-block; float: left; width: 500px;} 
#disqus_thread {display: inline-block; float: right;} 

をし、他のいくつかの組み合わせがfloat/left/rightを含んでいる：

footer {display: table;} 
#left {display: table-cell; width: 500px;} 
#disqus_thread {display: table-cell; width: auto;} 

別の動作しませんでした：

<footer> 
    <div id="left">....</div> 
    <div id="disqus_thread">....</div> 
</footer> 

は、ここに私が試してみましたし、うまくいかなかったいろいろなことをしていますまたはoverflow:auto。

大きな問題は、私のDisqusスレッドが何度も幅が1pxになってしまうことです。

Answer 1

あなたCSSテーブルレイアウトが動作するはずですが、あなたはまた、テーブルにwidthを設定するために、細胞にvertical-align値を設定する価値がより良いと思います。

テーブルには「収縮する」という特徴があり、Disqusフォームはiframeからロードされているので、フォームの幅はコンテナによって異なります。

footer { 
    display: table; 
    width: 100%; 
} 
#left { 
    display: table-cell; 
    vertical-align: top; 
    width: 500px; 
} 
#disqus_thread { 
    display: table-cell; 
    vertical-align: top; 
} 

あなたがfloatを使用することを好む場合は、calc()を使用することができ、及びフロートをクリアすることを忘れないでください。

footer:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
#left { 
    float: left; 
    width: 500px; 
} 
#disqus_thread { 
    float: left; 
    width: calc(100% - 500px); 
} 

Answer 2

この方法でも試すことができます。

<style> 
footer {display: inline-block; width:100%;} 
#left { float:left; width: 50%; background:#ccc; } 
#disqus_thread { float:right; width:50%; background:#666;} 
</style> 

<footer> 
    <div id="left">....</div> 
    <div id="disqus_thread">....</div> 
</footer> 

Answer 3

これは、ほとんどの場合、要素をインラインで表示する場合に有効です。

footer{ 
 
    width: 100%; 
 
    float:left; 
 
} 
 
div#left{ 
 
    width: 50%; 
 
    float: left; 
 
    display: inline; 
 
} 
 
div#disqus_thread{ 
 
    width: 50%; 
 
    float: left; 
 
    display: inline; 
 
}

<footer> 
 
    <div id="left">First</div> 
 
    <div id="disqus_thread">Second</div> 
 
</footer