Question

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

基本上我想在同一行上有两个div：Div1和Div2。 Div1应该向左对齐，Div2应该向右对齐。 Div2也设置了最小宽度。当宽度对于它们两者都不够时，则Div1必须将其内容包装为Div2。无论我尝试过什么，在Div1的内容被包裹之前，Div2总是被移到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>

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

没有测试，但它应该可以工作。

问候。

Answer 2

尝试查看CSS box-flex。

Answer 3

这是你要找的东西吗？ 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;
}

Answer 4

最高保真度的方法之一就是简单地使用显示为表格的div：

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

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

让左div在右div移动到左边之前包装其内容

4 个答案: