2

如何使用 DIV 实现此布局（使用表格构建）？

基本上我想在同一行上有两个 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>
4

4 回答 4

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

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

问候。

于 2013-01-09T15:02:42.100 回答
0

尝试查看CSS box-flex。

于 2013-01-09T15:01:23.667 回答
0

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

我更改了要使用的标记divs并更新了要使用的 CSSfloats

如果将窗口缩小，您可以看到红色框开始环绕绿色框。

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;
}
于 2013-01-09T15:03:15.873 回答
0

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

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

你可以在这里看到它看起来完全一样。

于 2013-01-09T15:04:38.247 回答