왼쪽에 고정 너비 div와 오른쪽에 Disqus가 있습니다.

Question

두 요소를 서로 옆에 표시하려고합니다.

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 값을 설정하는 가치가 더 나은 것입니다.

테이블에 "shrink to fit"기능이 있고, 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