0

2 つの div を並べて配置する方法について質問する人を見てきました。私はそれをうまくやることができます。

私の問題は、それらが互いに衝突しないことです。いつもギャップがあるようです。

たとえば、幅が 500px のラッパー div があります。その div 内には、幅が 250px の 2 つの別の div があります。お互いに十分なスペースがないため、隣同士に並ぶことはありません。

幅を 248 ピクセルに設定すると、整列しますが、互いに 4 ピクセルのギャップがあります。このコードの例は次の場所にあります。

https://c9.io/riotgear66/day1/workspace/sams/html/index.html

お気軽にご覧いただき、ブラウザの要素インスペクタで調整してみてください。

4

3 に答える 3

1

問題は、HTML の空白にあります。を使用する場合display: inline-block、Marc Audet が言ったように、要素の後の空白が考慮されます。

現在の方法を変更せずに修正するには、その空白を削除する必要があります。HTML の可読性を維持しながらこれを行う最も簡単な方法は、コメント アウトするか<!--、各要素の後と-->次の要素の前に使用することです。これにより、構造全体を変更する必要がなくなり、それぞれを 250px にすることもできます

終了>を次の行に移動したり、開始後のすべてを次の行に移動したり、最初の要素の後に各要素を<div>使用したりすることもできます。margin-left:-4px;または、ここで他の人が説明した方法を使用して、フローティングするか、FlexBoxを使用します

この状況を参照し、詳細を提供する CSS トリック ページは次のとおりです。

于 2013-08-21T16:09:54.673 に答える
1

レイアウトの問題はdisplay: inline-block、div 要素に適用した結果です。

これらの div 要素間の空白は、コンテンツのレイアウト時に考慮されます。ソース コードの外観が気にならない場合は、div 間の空白 (ラインフィードまたはキャリッジ リターン) を削除できます。

親コンテナーには特定のサイズ (500px x 300px) があるため、絶対配置を使用して子要素を配置します。これにより、ロゴ モチーフを他の画像の上に配置しやすくなります。

他の回答で述べられているように、フロートを使用することもできますが、簡単でも難しくもありません。

このアプリケーションでは、レイアウトが固定されているため、レスポンシブ デザインやフレキシブル デザインに関する設計上の考慮事項がないため、どちらのアプローチも有効です。

デモ

次のデモでこれがどのように機能するかを確認できます: http://jsfiddle.net/audetwebdesign/hZ5dB/

HTML:

<div class="container">
    <div class="panel ul"></div>
    <div class="panel ur"></div>
    <div class="panel ll"></div>
    <div class="panel lr"></div>
    <div class="overlay"><span>Cats</span></div>
</div>

そしてCSS：

.container {
    border: 1px dotted blue;
    width: 500px;
    height: 300px;
    position: relative;
    margin: 0 auto;
}
.panel {
    width: 250px;
    height: 150px;
    position: absolute;
}
.ul {
   background: red url("http://placekitten.com/400/400") -50px -20px no-repeat;
   top: 0; left: 0;
}
.ur {
   background: red url("http://placekitten.com/300/300") 0px -30px no-repeat;
   top: 0; right: 0;
}
.ll {
   background: red url("http://placekitten.com/350/250") -20px -20px no-repeat;
   bottom: 0; left: 0;
}
.lr {
   background: red url("http://placekitten.com/300/200") 0px -30px no-repeat;
   bottom: 0; right: 0;
}
.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
}
.overlay span {
    display: block;
    background-color: gray;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    width: 80%;
    height: 80%;
    margin: 10%;
    line-height: 80px;
}

また、元の背景画像を変更せずに円形のモチーフを作成し、PhotoShop などで少し手間を省く方法も示します。

于 2013-08-21T15:58:52.667 に答える
1

あなたは使うべきではありません

display: inline-block;

それらを作ります：

float: left;

これがどうあるべきかのjsfiddleサンプルです。

http://jsfiddle.net/Tqdqa/

于 2013-08-21T16:04:41.010 に答える