css - 带有 2 列 div 的内联文本

Question

我使用 div 替换 2 列的表。如果第一列文本太长，我无法很好地显示它们。例如：“口语”应与前第二列的“英语”内联，但不能与“贷款，牙科”内联。

#wrap {
 width:280px;
 margin:0 auto;
}
.left_col {
 float:left;
 width:30%;
}
.right_col {
float:right;
width:70%;
}

http://jsfiddle.net/HtyXP/

Answer 1

这是因为您将宽度设置为 280px (#wrap)。Medical, Education support, Loans, Dental是一个很长的句子，它溢出了 70% 的right_col. 与Language spoken.

为了让一切看起来不错，你必须增加这个值。400px 的宽度应该可以。

Answer 2

我看到解决这个问题的唯一方法是一张桌子，或者如果你想坚持使用 div 拼命这个：

<div id="wrap">
  <div class="row">  
    <div class="left_col">Industry:</div>
    <div class="right_col">Insurance</div>
  </div><div class="row">
    <div class="left_col">Co. Size:</div>
    <div class="right_col">201 - 500 Employees</div>
  </div><div class="row">
    <div class="left_col">Working Hours:</div>
    <div class="right_col">Regular hours, Mondays-Fridays</div>
  </div><div class="row">
    <div class="left_col">Benefits:</div>
    <div class="right_col">Medical, Education support, Loans, Dental</div>
  </div><div class="row">
    <div class="left_col">Spoken Language:</div>
    <div class="right_col">English</div>
  </div>
</div>