3

私は CSS が初めてdivで、この場合、緑と青の中間に s 間の境界線を配置する方法を考えていましたか?

ここに画像の説明を入力

HTML:

<div class="wrap">
<div class="left">

</div>
<div class="right">

</div>

CSS:

.wrap {
  background: gray;
  overflow: hidden;
  width: 1024px;
   min-height: 400px;
  position: relative;
  margin: auto;
}

.right {
  float: right;
  width: 70%;
  min-height: 550px;
  background: blue;
  position: relative;
  border-left: 1px solid;
}

.left {
  float: left;
  width: 30%;
  min-height: 550px;
  background: green;
  margin: auto;
  border-right: 1px solid;
}

ここに画像の説明を入力

4

3 に答える 3

2

これを解決するには、いくつかの方法があります。

最も簡単なbox-sizing: border-box;のは、要素のボックスの境界線部分を作成する方法です。したがって、30% + 70% を足しても 100% になります。ただし、これは部分的にしかサポートされていません。

.right, .left{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

これについてはフィドルを参照してください。

使用できる別のアプローチは、フローティングの代わりに絶対配置を使用することです (したがって、ドキュメント フローから取り出された要素の単純なオーバーラップが発生します)。

.right, .left{
  float: none;
  position: absolute; //make sure the parent element has relative positioning here
}
.right{
  right: 0;
}
.left{
  left: 0;
}

別のフィドルを見る

次に、パーセント値から 1 ピクセルを減算できる calc (あまりサポートされていません) もあります。

.left{
   width: -webkit-calc(30% - 1px);
   width: -moz-calc(30% - 1px);
   width: calc(30% - 1px);
}
.right{
  width: -webkit-calc(70% - 1px);
  width: -moz-calc(70% - 1px);
  width: calc(70% - 1px);
}

再び、フィドル

于 2013-10-06T09:08:10.093 に答える
0

CSS テーブル レイアウトを使用できます。それをチェックしてくださいWorking Fiddle

IE8+、クロスブラウザ対応。

HTML: (非常にクリーンでシンプル)

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS: (メンテナンスが容易でクロスブラウザ)

.wrap {
    background-color: gray;
    width: 1024px;
    min-height: 400px;
    display: table;
    border-collapse: collapse;
}
.left, .right
{
    display: table-cell;
    min-height: 550px;
}
.right {

    width: 70%;
    background-color: blue;
    border-left: 1px solid black;
}
.left {
    width: 30%;
    background-color: green;
    border-right: 1px solid black;
}
于 2013-10-06T11:37:48.223 に答える