50% 宽度两列 css

Question

鉴于下表：

<table width="100%">
  <tr>
    <td id="td1"></td>
    <td id="td2"></td>
    <td id="td3"></td>
    <td id="td4"></td>
  </tr>
</table>

谁能告诉我如何让 td1 自动适应内容，但使 td1 + td2 的宽度 = 父级宽度的 50%？

Answer 1

正如您所说，您可以完全控制标记，我建议您使用div 和display: flex;，而不是table。使用 JS 似乎有点矫枉过正。 （注：IE11 limitation）

我已经设置了一个简短的示例来说明可能会帮助您入门的方法，但我并不是 100% 同意您希望 td2 和 td4 采取的行为。

但是，如果您想为这些元素设置最大宽度，您可以使用something like this：

#td2 {
    flex-grow: 0; /* do not grow   - initial value: 0 */
    flex-shrink: 0; /* do not shrink - initial value: 1 */
    flex-basis: 200px; /* width/height - initial value: auto */
}

并且拥有：

#td1 { 
    flex-grow: 1; 
}

这将允许#td1 自动填充空间，但为#td2 留出 200 像素。

作为一般说明，我还建议在使用 CSS 时使用类，而不是 ID。

Link to Codepen

希望对您有所帮助！祝你好运。

div {
  border: 1px solid #000; 
}
#r { 
  display: flex;
}
.contain {
  display: flex;
  width: 50%;
}

<div id="r">
  <div class="contain">
    <div id="td1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </div>
    <div id="td2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
  <div class="contain">
    <div id="td3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
    <div id="td4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
</div>