Question

我使用div替换2列的表。如果第一列文本太长，我有问题以良好的视图显示它们。例如：'Spoken'应该与'English'内联，但不能与之前的第2列中的'Loans，Dental'一致。

#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是一个很长的句子，它溢出了right_col的70％。与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>

带有2列div的内联文本

2 个答案: