27

<div>下の画像に示すように、水色のボックスdiv内に左にフロートと右にフロートをネストしています。この画像に示すように、それらの間に垂直線を挿入する方法がわかりません。

ここに画像の説明を入力してください

これには次のプロパティがあります。

1）制御できる、または合理的に見えるいずれかの側のパディング/マージン（つまり、一方のdivがもう一方のdivよりもそれほど近くない）

2）示されているように上下にマージンを残します。つまり、水色のdivの垂直方向の幅全体を拡張しません。

3）ブラウザウィンドウが大きく/小さくなり、青いボックスのサイズが増減するにつれて、＃1と＃2を動的に維持します

シンプルな、できればCSSのみのソリューションを探しています。

関連するCSS：

#left {
  position: relative;
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
}

#right {
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;
}

#blue_box {
  position: relative;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  margin-left: 40%;
  overflow: auto; /*needed so that div stretches with child divs*/
}
4

3 に答える 3

57

仕切りには div を使用します。左右の div の高さが等しいかどうかに関係なく、常に垂直方向の中央に配置されます。サイトのどこでも再利用できます。

.divider{
    position:absolute;
    left:50%;
    top:10%;
    bottom:10%;
    border-left:1px solid white;
}

http://jsfiddle.net/gtKBs/で実際の例を確認してください

于 2011-03-19T22:04:13.007 に答える
0

css のみのソリューションは考えられませんが、これら 2 つの間に div を配置し、css でプロパティを設定して、画像に示すような線のようにすることはできませんか? テーブルセルとしてdivを使用している場合、これは問題に対する非常に簡単な解決策です

于 2011-03-19T21:55:34.673 に答える