CSS两列没有特定宽度

Question

我正在尝试移植一个简单​​的两列表来使用div和float。我需要一个能够将所有列的宽度扩展到最大内容（不占用整个浏览器宽度）的表的功能，但是希望浮点数的附加功能能够在浏览器宽度为时分割列降低。

我可以使用以下内容实现此目的：

＆＃13;

＆＃13;

div {
  max-width: 285px;
}

div div:first-child {
  float: left;
  border: 1px solid #ccc;
  margin: 1px;
  width: 145px;
}

div div:nth-of-type(2) {
  float: right;
  border: 1px solid #ccc;
  margin: 1px;
  width: 130px;
}

div div:last-child {
  clear: left;
}

＆＃13;

<div>
  <div>The</div>
  <div>12</div>
  <div class="clear" />
  <div>The cat</div>
  <div>12 34</div>
  <div class="clear" />
  <div>The cat sat</div>
  <div>12 34 56</div>
  <div class="clear" />
  <div>The cat sat on</div>
  <div>12 34 56 78</div>
  <div class="clear" />
  <div>The cat sat on the</div>
  <div>12 34 56 78 9A</div>
  <div class="clear" />
  <div>The cat sat on the mat</div>
  <div>12 34 56 78 9A BC</div>
  <div class="clear" />
</div>

＆＃13;

＆＃13;

＆＃13;

如何在不设置div的width和max-width值的情况下实现相同的结果？使用表格这将是自动的，但会丢失分割功能。我希望有一个只有CSS的解决方案。

结果应该是两个对齐的列，必要时可以分割，如图片链接所示。

Answer 1

添加到第二个div margin-left和float: left。

div div:nth-of-type(2) {float:left; border: 1px solid #ccc; margin: 1px 1px 1px 80px; width: 130px;}
                              ^^^^                                              ^^^^

https://jsfiddle.net/shhdq5kg/

Answer 2

由于我认为只有CSS才有可能，我有一个jQuery解决方案，所以它会：

＆＃13;

＆＃13;

var xyz = $('.row div:first-child'),
  abc = $('.row div:nth-child(2n)'),
  arr = [],
  arr2 = [];

xyz.each(function() {
  arr.push($(this).width());
});

var max = Math.max.apply(Math, arr);
xyz.css('width', max);

abc.each(function() {
  arr2.push($(this).width());
});

var max2 = Math.max.apply(Math, arr2);
abc.css('width', max2);

＆＃13;

.row {
  width: 100%;
  overflow: hidden;
}

.row div {
  float: left;
  border: 1px solid #ccc;
  margin: 1px;
}

.row div:nth-child(2) {
  margin-left: 10px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="xyz">
  <div class="row">
    <div>The</div>
    <div>12</div>
  </div>
  <div class="row">
    <div>The cat</div>
    <div>12 34</div>
  </div>
  <div class="row">
    <div>The cat sat</div>
    <div>12 34 56</div>
  </div>
  <div class="row">
    <div>The cat sat on</div>
    <div>12 34 56 78</div>
  </div>
  <div class="row">
    <div>The cat sat on the</div>
    <div>12 34 56 78 9A</div>
  </div>
  <div class="row">
    <div>The cat sat on the mat</div>
    <div>12 34 56 78 9A BC</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;