html - 左边是固定宽度的 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 值。

因为表格具有“缩小以适合”功能，我猜想 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()，并且不要忘记清除 float 。

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