固定左边的宽度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

CSS表格布局应该有效，但您最好为表格设置width，也值得为单元格设置vertical-align值。

因为，table具有“缩小以适应”功能，我猜这个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