完全な高さではなく、2つのネストされたDivの間に垂直分割線を挿入する

StackOverflow https://stackoverflow.com/questions/5365123

質問

私は左に浮かんで右に浮かんでいます <div> 下の画像に示すように、ライトブルーボックスDiv内にネストされています。この画像に示すように、それらの間に垂直線を挿入する方法を理解できません。

enter image description here

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

1）どちらかの側のパディング/マージンをコントロールまたは合理的に見えることができます（つまり、1つの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*/
}
役に立ちましたか？

解決

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

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

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

他のヒント

これを試して。青い箱を右に浮かぶように設定し、左右に固定された高さを与え、左divの右側に白い境界線を追加しました。また、丸い角を追加して、例に合わせてさらに一致します（これらはIE 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;
}

CSSソリューションのみを考えることはできませんが、それらの2の間にdivを持っていて、画像に表示されているような線のように見えるプロパティをCSSに設定することはできませんでしたか？ Table CellsのようにDivを使用している場合、これは問題に対する非常に簡単な解決策です

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top