web-dev-qa-db-ja.com

入れ子になった2つのdivの間に、垂直方向の分割線を挿入します。完全な高さではありません

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

enter image description here

次のプロパティがあります。

1）どちらかの側でパディング/マージンを制御できるか、合理的に見える（つまり、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*/
}
htmlcssheightabsolutedivider
22
Tim Koelkebeck

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

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

http://jsfiddle.net/gtKBs/ で動作例を確認してください

49
Hussein

これを試して。青いボックスを右にフロートするように設定し、左と右の高さを固定し、左のdivの右側に白い境界線を追加しました。また、例に合わせて丸い角を追加しました（つまり、8以下では動作しません）。また、相対的な位置を取り出しました。必要ありません。ブロックレベル要素は、デフォルトで相対位置に設定されます。

こちらをご覧ください： http://jsfiddle.net/ZSgLJ/

#left {
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
  border-right: 1px solid white;
  height:400px;
}

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

#blue_box {
  background-color:blue;
  border-radius: 10px;
  -moz-border-radius:10px;
  -webkit-border-radius: 10px;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  float: right;
}
1
Adam

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

0
John