javascript - 说明水平并排列出

Question

我有两个描述列表(一个目的地周围的咖啡店，另一个那个目的地周围的 donut 店)，我想水平并排显示。我已经尝试了 display:inline-block 和 float 的所有组合都无济于事。无论如何，一个列表总是被另一个列表覆盖。

fiddle :

http://jsfiddle.net/JamesGold/e1fsu5jt/

列表由调用 Google Places 库的 javascript 代码填充。

编辑:列表似乎没有在 fiddle 中填充，但它们确实在我的浏览器中填充了...... fiddle 不支持 Google Places API 调用吗？

Answer 1

将它们包裹在 div 中， float 应该可以正常工作。

<div style="width: 50%; float:left;">
  <dl>
    <dt id="coffee1"></dt>
      <dd id="coffee1_address"></dd>
      <dd id="coffee1_number"></dd>
      <dd id="coffee1_rating"></dd><br>
    <dt id="coffee2"></dt>
      <dd id="coffee2_address"></dd>
      <dd id="coffee2_number"></dd>
      <dd id="coffee2_rating"></dd><br>
    <dt id="coffee3"></dt>
      <dd id="coffee3_address"></dd>
      <dd id="coffee3_number"></dd>
      <dd id="coffee3_rating"></dd><br>
    <dt id="coffee4"></dt>
      <dd id="coffee4_address"></dd>
      <dd id="coffee4_number"></dd>
      <dd id="coffee4_rating"></dd><br>
    <dt id="coffee5"></dt>
      <dd id="coffee5_address"></dd>
      <dd id="coffee5_number"></dd>
      <dd id="coffee5_rating"></dd>
  </dl>
  </div>
  <div style="width: 50%; float:right;">
  <dl>
    <dt id="donuts1"></dt>
      <dd id="donuts1_address"></dd>
      <dd id="donuts1_number"></dd>
      <dd id="donuts1_rating"></dd><br>
    <dt id="donuts2"></dt>
      <dd id="donuts2_address"></dd>
      <dd id="donuts2_number"></dd>
      <dd id="donuts2_rating"></dd><br>
    <dt id="donuts3"></dt>
      <dd id="donuts3_address"></dd>
      <dd id="donuts3_number"></dd>
      <dd id="donuts3_rating"></dd><br>
    <dt id="donuts4"></dt>
      <dd id="donuts4_address"></dd>
      <dd id="donuts4_number"></dd>
      <dd id="donuts4_rating"></dd><br>
    <dt id="donuts5"></dt>
      <dd id="donuts5_address"></dd>
      <dd id="donuts5_number"></dd>
      <dd id="donuts5_rating"></dd>
  </dl>
</div>

这是一个 fiddle :http://jsfiddle.net/e1fsu5jt/6/ - 我在右侧栏中添加了文本 donuts(请参阅下面的解释)。

注意:您可能不会在右侧看到 donut ，因为出于某种原因，没有返回任何结果，但这是一个完全不同的问题(与 css 定位无关)。

编辑:实际上，您不必将它们包装在 div 中，这只是最佳实践。您也可以将相同的样式应用于 dl 元素，您只需要确保操作正确即可。不确定你之前做了什么为什么 float 对你不起作用，但它应该。您只需确保其中一个元素有 left，另一个元素有 right 并且两者都有指定的 width 加起来等于他们的容器或 100%(包括边距和填充!)。

这是一个没有额外 div 的更新的 fiddle :http://jsfiddle.net/e1fsu5jt/9/