18

ページ全体に1組の流動的なdivをフロートさせたいと思います。それぞれがコンテナの幅の半分を占めますが、それらの間に10pxのマージンがあります。私はこのJSFiddlehttp://jsfiddle.net/andfinally/sa53B/5/を実行しました。これが、 HTMLです。

<div class="clearfix">
    <a class="prev" href="#">Previous</a>
    <a class="next" href="#">Next</a>
</div>

そしてCSS：

.prev {
    background: black;
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 50%;
    margin-right: 5px;
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 50%;
    margin-left: 5px;
}

ボックスサイズのルールでは、これを機能させるのに十分ではありません。divの幅は50％を超えています。この質問に対する答えの1つで、誰かがCSSdisplay-tableの使用を提案しました。誰かがこの状況でそれを機能させる方法を説明できますか？

ありがとう！

4

7 に答える 7

33

a）マージンを下げ50%て48%マージンを作る2%か、b）CSS3calcを使用することができます。これは、どこでもサポートされているわけではありませんが、近い将来オプションになるはずです。（具体的には、IE8がテーブルから外れている場合）（互換 性についてはhttp://caniuse.com/#feat=calc

を参照してください） パーセンテージを使用した例：http：//jsfiddle.net/sa53B/9/

.prev {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 48%;
    margin: 0 2% 10px 0
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 48%;
    margin: 0 0 10px 2%
}

使用例：http calc：//jsfiddle.net/sa53B/6/

.prev {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 47%;
    width: -webkit-calc(50% - 5px);
    width: calc(50% - 5px);
    margin: 0 5px 10px 0;
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 47%;
    width: -webkit-calc(50% - 5px);
    margin: 0 0 10px 5px;
}
于 2013-03-01T18:21:56.743 に答える
7

マージンはコンテナの幅に追加されます。パーセンテージに基づく幅を使用している場合は、マージン値もパーセンテージに設定する必要があります。

たとえば、2つの50％divが必要な場合。マージンも考慮する必要があります。そのためには、全幅からマージンを差し引く必要があります。左右に1％のマージンが必要な場合は、合計幅から2％を削除する必要があります。

div {
float: left;
width: 48%;
margin: 0 1%;
}

更新されたフィドル：http：//jsfiddle.net/sa53B/8/

于 2013-03-01T18:22:32.113 に答える
2

遅いですが、誰かがこの方法で修正することに興味があるかもしれません：

表示する要素をdivのある列にラップします。

<div class="left"><a ....></a></div>
<div class="right"><a ....></a></div>

そして、それらのスタイルを設定するだけです：

.left {
    float:left;
    width:50%;
}

.right {
    float:right;
    width:50%;
}

divコンテンツのマージンが何であれ、50％の幅には影響しません。私は、有用なcss calcを聞く前に、このように進めていました。

JSFiddleを参照してください

于 2014-09-04T20:21:08.960 に答える
2

最近の私のタスクでは、8pxの固定マージンを持つ2つのfloat列が必要です。

だから、私は計算魔法なしでボーダーとボックスサイジングのプロパティを使用しました。

したがって、ソリトンは次のとおりです。

.wrapper__col {
   width: 50%;
   box-sizing: border-box; // used to change box-model
   overfow: hidden; // clearfix hack
}
.wrapper__col:nth-child(odd) {
   float: left;
   border-left: 4px solid transparent;
}

.wrapper__col:nth-child(even) {
   float: right;
   border-right: 4px solid transparent;
}
<div class="wrapper">
   <div class="wrapper__col">1</div>
   <div class="wrapper__col">2</div>
</div>

だから、それがすべてです;）

于 2017-10-24T13:22:38.273 に答える
1

あなたがやろうとしていることは、固定マージンでは機能しません。パーセンテージマージンを使用して計算する必要があります。

ボックスのサイズ設定は、余白スペースではなく、パディングと境界スペースにのみ影響します。したがって、50％+ 50％= 100％+ 5px + 5px> 100％。

％マージンを使用すると、問題は解決します。

于 2013-03-01T18:26:54.077 に答える
0

これが私がそれを行う方法ですが、それは間の可変ギャップを使用します：

css： 

.left {
  float:left;
  width:59%;
  margin-right: 1%;
  background-color:red;
}
.right {
  float:left;
  width:39%;
  margin-left: 1%;
  background-color:blue;
}

html：

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

jsfiddle： http: //jsfiddle.net/gkmjLfgx/

于 2015-03-11T05:00:53.743 に答える
0

水平方向と垂直方向に同じ10pxの間隔が必要で、同じサイズの列が必要な場合があります。

これを行うには、各列内の追加のDIVに「border-left：10px solid white」を追加し、列コンテナーに「margin-left：-10px」を追加して、左側の列の境界線を食いつぶします。

フィドル128psahu

于 2015-07-07T09:15:21.157 に答える