CSS 两列没有特定宽度

Question

我正在尝试移植一个简单的两列 table 以使用 div 和浮动。我需要一个 table 的功能，它能够将所有列的宽度缩放到最大的内容（不占用整个浏览器宽度），但希望浮动的添加功能能够在浏览器宽度减小。

我可以用这样的方法来实现：

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;
}

<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>

如何在不需要为 div 设置 width 和 max-width 值的情况下获得相同的结果？使用 table 这将是自动的，但会失去拆分功能。我希望有一个 CSS 唯一的解决方案。

结果应该是两个对齐的列，必要时可以拆分，如图link。

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 解决方案，所以它是：

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);

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

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

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

<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>

CSS 两列没有特定宽度

CSS two columns without specific widths

css

layout

css-float