3

まず、私はフロントエンド開発の初心者です。専門家から、私の問題の可能な「専門的な」解決策について聞きたいだけです。

さて、まずこのフィドルをチェックしてください：http://jsfiddle.net/SB7yR/

ここに私が望むものがあります: 各行に 2 つのボックスを作成します。2 つのボックスの間にも余白を作りたいので、ここではできません。

そのような状況の解決策があります。たとえば、「最後」のようなクラスを作成し、それを与えてからmargin-right: 0;、各行の最後のボックスに適用します。しかし、私はそれをしたくありません。それは..うーん..アマチュアの解決策に聞こえます。

アドバイスをありがとう。

4

5 に答える 5

2

クロスブラウザの互換性のために、追加の html 要素はどうですか:

http://jsfiddle.net/SB7yR/8/

html:

<div id="addresses-wrap">
    <div class="addresses">
        <div class="overflow">
            <div id="address-box"></div>
            <div id="address-box"></div>
            <div id="address-box"></div>
            <div id="address-box"></div>
            <div id="address-box"></div>
        </div>
    </div>
</div>

CSS:

#addresses-wrap {
    width: 620px;
    height: auto;
    border:1px solid green;
    overflow:hidden;
}
.addresses {
    width:100%;
    float:left;
    margin-top: 30px;
}
.addresses .overflow {
    width:650px;
    overflow:hidden;
}
.addresses #address-box {
    height: 123px;
    width: 298px;
    border:1px solid #000;
    float:left;
    margin:0 20px 20px 0;
}
于 2013-08-12T15:28:08.917 に答える
1

これを機能させるには、フロートを使用する必要があります。.addresses #address-box定義を次のように置き換えてみてください。

.addresses #address-box {
    height: 123px;
    width: 288px;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    margin: 10px;
    overflow: hidden;
    float: left;
  }
于 2013-08-12T15:09:03.180 に答える