2

このレイアウト（テーブルを使用して構築されている）をDIVで実装するにはどうすればよいですか？

基本的に、同じ行にDiv1とDiv2の2つのdivを配置したいと思います。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する 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;
}
于 2013-01-09T15:03:15.873 に答える
0

これを行うための最も忠実な方法の 1 つは、テーブルとして表示される 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 に答える