5

4 つの灰色のボックスをすべて同じ行に表示するのに問題があります。それぞれに 25% の幅を与えることで、解像度や画面サイズに関係なく、自動的にそれぞれ 1/4 の画面サイズが表示されると考えられます。最初の 3 つを取得しますが、4 つ目は次の行にドロップダウンします。それらをすべて同じ行に強制する方法についてのアイデアはありますか?

HTML

<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>

CSS

.b1, .b2, .b3, .b4 {
   display:inline-block;
   position: relative;
   margin: 5px;
   float:left;
   width:25%;
   height:400px;
   background-color: lightgrey;
}
4

3 に答える 3

5

CSS Box Modelを見てください。それらが同じ行に並んで浮かんでいない理由は、マージンを追加しているためです。この余白は、コンテンツ領域の高さや幅では考慮されません。margin 以外のものを使用した場合は、box-sizingプロパティを使用できますが、それは最善の方法ではありません。理想的には、マージンを補うので、このjsFiddleのようなものから始める必要があります。

必須の追加: 幅の合計は最大92%で、残りの8%を使用できるため、margin-left に 1%、margin-right に 1% を追加すると、margin プロパティを使用して 4 項目が乗算されます (8 が得られます)。 % 必要な幅)、100% の幅がすべて考慮されています。

HTML

<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>

CSS

.b {
    display: inline-block;
    position: relative;
    margin: 1%;
    float: left;
    width: 23%;
    height: 400px;
    background-color: lightgrey;
}
于 2013-09-27T00:00:37.717 に答える
2

これを試してみてください HTML

<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>

CSS

.b1, .b2, .b3, .b4{
    display:inline-block;
    position: relative;
    margin: 5px;
    float:left;
    width: calc(25% - 10px);
    height:400px;
    background-color: lightgrey;
}

幅でわかるように、calc()を使用し、元の 25% 幅から左右の 10 ピクセルの余白を差し引いて使用します。

于 2013-09-27T00:00:05.510 に答える
1

あなたのマージンが問題の原因です。このように見てください。4 つの div のそれぞれには、ページ幅の 25% に加えて、5 ピクセルの左余白と 5 ピクセルの右余白が必要です。したがって、マージンはパーセンテージベースにするか、各 div のパーセンテージ幅を減らしてマージンを確保する必要があります。

于 2013-09-26T23:54:30.547 に答える