让左 div 在右 div 移动到左下之前包装其内容答案

【问题标题】：Let left div wrap its conent before right div is moved under the left one让左 div 在右 div 移动到左下之前包装其内容
【发布时间】：2012-12-23 15:58:35
【问题描述】：

如何使用 DIV 实现 this layout（使用表构建）？

基本上我想在同一行有两个 div：Div1 和 Div2。 Div1 应向左对齐，Div2 应向右对齐。 Div2 还设置了最小宽度。当它们的宽度都不够时，Div1 必须将其内容包装起来，为 Div2 留出空间。无论我尝试过什么，Div2 总是在 Div1 的内容被包装之前移动到 Div1 下。

所以我想出了用桌子制作的解决方案。如何使用 DIV 构建相同的布局？

使用表格的解决方案：

<!DOCTYPE html>
<html>

<head>
<style>
#table {
  width: 100%;
  word-wrap: break-word;
}

#div1 {
  border: 1px solid red;
}

#div2 {
  width: 30%;
  min-width: 250px;
  text-align: right;
  border: 1px solid green;
}
</style>
</head>

<body>

  <table id="table">
    <tr>
      <td id="div1">This text should wrap when window is made smaller.
      <td id="div2">This takes 30% but not less than 250px;
  </table>
</body>

</html>

【问题讨论】：

您的问题是“如何在不使用表格的情况下做到这一点？”

标签： css html tablelayout

【解决方案1】：

HTML：

<div id="wrapper">
  <div id="left"></div>
  </div id="right"></div>
</div>

CSS：

#wrapper {
  width: 100%;
  float: left;
}

#left {
  border: 1px solid red;
  float: left;
}

#right {
  width: 30%;
  min-width: 250px;
  text-align: right;
  border: 1px solid green;
  float: left;
}

没有测试过，但应该可以。

问候。

【讨论】：

这看起来不像 #left 会环绕 #right jsfiddle.net/fFkNW/7
jsfiddle.net/fFkNW - 这里没有换行。它不应该。为什么你认为应该？你不是问这个问题的人。
它不起作用。当窗口变小时，右边的 div（绿色）会向下跳。您的 HTML 无效，请修复它，以确保我正确理解您。

【解决方案2】：

这是您要找的东西吗？ http://jsfiddle.net/fFkNW/3/

我将标记更改为使用 divs，并将 CSS 更新为使用 floats

如果你把窗口变小，你可以看到红框开始环绕绿框。

HTML

  <div id="div2">This takes 30% but not less than 250px.</div>
  <div id="div1">This text should wrap when window is made smaller.</div>

CSS

#div1 {
  border: 1px solid red;
}

#div2 {
  width: 30%;
  min-width: 250px;
  float: right;
  border: 1px solid green;
}

【讨论】：

OP 正在尝试使用更多语义标记复制表中的输出。你的输出是不同的。
其实，我一直在寻找这样的东西。我需要再测试一下...
哇！关键是改变 div 声明的顺序。在尝试自己时，我没有尝试交换 div。您的解决方案完全按照我的意愿解决了我的问题。但是，这不是问题的确切布局，因为左侧 Div1 中的某些文本可能位于 Div2 下方，而表格无法做到这一点。

【解决方案3】：

试试看CSS box-flex。

【讨论】：

【解决方案4】：

执行此操作的最高保真度方法之一是简单地使用显示为表格的 div：

#table {
  width: 100%;
  word-wrap: break-word;
  display: table;
}
#table > div {
  display: table-row;
}
#div1, #div2 {
  display: table-cell;
}

您可以看到here 看起来完全一样。

【讨论】：

根据您链接到的示例，红色框中的内容不会包裹绿色框中的内容。
@TimBanks 查看我对您的回答的评论。引用 OP：“如何使用 DIV 构建 same 布局？”。你正在做一些完全不同的事情。
谢谢！您的解决方案需要添加额外的 div，这使其更像是一种解决方法。从理论上讲，这是对我的问题的正确答案，但我正在寻找一种使用 div 构建相同布局的真正方法。