Фиксированная ширина div слева и Disqus справа

Question

Я пытаюсь, чтобы мои 2 элемента отображались один рядом друг с другом.

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

Вот различные вещи, которые я пробовал и не получилось:

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

другой, которые не работали:

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

и некоторые другие комбинации, которые включают float/left/right или overflow:auto.

Одна большая проблема заключается в том, что моя резьба Disqus заканчивается тем, что 1px в ширину много раз.

Answer 1

You 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

Это должно работать в большинстве случаев, чтобы отображать элементы inline.

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