0

いくつかの画像リンクを含むボックスを作成しています。現在、Chrome と Safari で見栄えがよく、Firefox のデフォルトのズーム レベルでラップするものがあります。ズームインするとボックスがきれいに見えますが、通常のズーム レベルではラップされています。通常、Chrome では次のように表示されます。

Chrome のスクリーンショット

...これが Firefox での表示です。

Firefox のスクリーンショット

これの奇妙な点は、右側のボックスが完全に折り返されていないことです。最初の行に上部と下部の境界線の一部が表示されており、この特定のポイントで折り返されている理由がわかりません。HTML は次のようになります。

<div class="clearfix buyTrackContainer">
<div class="buyTrackBox">
    <p>Buy this Track</p>
    <div class="buyLinksBox">
        <div class="buyLinksBoxLeft">
            <a href="{{ buylink-itunes }}" target="_blank"><div class="d-itunes"></div></a>
        </div>
        <div class="buyLinksBoxRight">
            <a href="{{ buylink-amazon }}" target="_blank"><div class="d-amazon"></div></a>
        </div>
    </div>
</div>
<div class="buyTrackBox">
    <p>Buy on Vinyl/CD</p>
    <div class="buyLinksBox">
        <div class="buyLinksBoxLeft">
            <a href="{{ buylink-ebay }}" target="_blank"><div class="b-ebay"></div></a>
        </div>
        <div class="buyLinksBoxRight">
            <a href="{{ buylink-amazon }}" target="_blank"><div class="b-amazon"></div></a>
        </div>
    </div>
</div>

...関連する CSS は次のとおりです。

.buyTrackContainer {
    text-align: center;
}
.buyTrackBox {
    display:inline-block;
    border:1px solid #ddd;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 1px;
    padding-bottom: 5px;
    width:46%;
    text-align:left;
    background-color: #fff;
    border-radius: 3px;
    border-bottom:3px solid #ddd;
}
.buyLinksBoxLeft {
    display:inline;
    border: 1px solid #ddd;
    border-bottom: 3px solid #ddd;
    border-radius: 3px 0px 0px 3px;
    padding: 12px 4px 8px 8px;
    text-align:center;
    vertical-align:center;
    background-color:#fff;
}
.buyLinksBoxRight {
    display:inline;
    border: 1px solid #ddd;
    border-bottom: 3px solid #ddd;
    border-radius: 0px 3px 3px 0px;
    border-left:0px;
    padding: 12px 8px 8px 4px;
    text-align:center;
    vertical-align:center;
    background-color:#fff;
}
.buyLinksBox {
    display:block;
    text-align:center;
    padding-bottom:10px;
    padding-top:8px;
}
div.d-itunes {
    display:inline-block;
    margin-left:0px;
    width:50px;
    height:17px;
    background:url(/images/misc/iTunes-buy-button.png) no-repeat;
}
div.d-amazon {
    display:inline-block;
    margin-left:0px;
    width:50px;
    height:17px;
    background:url(/images/misc/Amazon-buy-button.png) no-repeat;
}
div.b-ebay {
    display:inline-block;
    margin-left:0px;
    width:50px;
    height:17px;
    background:url(/images/misc/eBay-buy-button.png) no-repeat;
}

私は適切な CSS 設計に比較的慣れていないので、コーディング スタイルを改善する方法についての指針をいただければ幸いです。ここで何が起こっているのか、これを引き起こす可能性があることを誰かが知っていますか?

4

3 に答える 3

0

  1. 名前の冗長性を避けてください...例。.BuyLinksBoxRight( の息子.BuyLinksBox) を ただ.right( と同じ.left)に変更

  2. 複数のアイテムに多くの共通プロパティがある場合は、それらを共通セレクターにグループ化します。

  3. 可能な場合は、ワンライナーのパディングとボーダーを使用してください。

コードが読みやすくなり、問題がなくなります。

Running Demo

.buyTrackContainer {
    text-align : center;
}

.buyTrackContainer > div, 
.buyLinksBox > div {
    display : inline-block;
     border : 1px solid #ddd;
}

.buyTrackBox {    
    background-color : #fff;         
       border-bottom : 3px solid #ddd;
       border-radius : 3px; 
          text-align : left;
             padding : 1px 3px 5px 3px;
               width : 134px;
}

.buyLinksBox {        
    padding-bottom : 10px;
       padding-top : 8px;
        text-align : center;
}

.buyLinksBox > div {
    background-color : #fff;
      vertical-align : center;              
       border-bottom : 3px solid #ddd;
          text-align : center;
}

.buyLinksBox > .left {
    border-radius : 3px 0px 0px 3px;
          padding : 12px 4px 8px 8px;
}

.buyLinksBox > .right {
    border-radius : 0px 3px 3px 0px;
      border-left : 0px;
          padding : 12px 8px 8px 4px;
}

.buyLinksBox > div > a > div {
    margin-left : 0px;
         height : 17px;     
          width : 50px;         
}

div.d-amazon, div.b-amazon {
    background : url(/images/misc/Amazon-buy-button.png) no-repeat;
}

div.d-itunes {
    background : url(/images/misc/iTunes-buy-button.png) no-repeat;
}

div.b-ebay {
    background : url(/images/misc/eBay-buy-button.png) no-repeat;
}
于 2013-10-31T14:51:06.780 に答える
0

最初のコンテナを変更して、以下を追加してみてください

.buyTrackBox {
white-space:nowrap
}

.buyLinksBoxLeft {
float:left;
}

.buyLinksBoxRight {
float:right;
}

さらに、親コンテナに収まるように幅をパーセンテージで分割してみてbuyLinksBoxLeftください。div と子に対しても同じことを行いますbuyLinksBoxRight40%buyLinksBox

于 2013-10-31T13:57:57.263 に答える
0

あなたのクラスでは、「buyLinksBoxLeft」と「buyLinksBoxRight」の変更

display: inline;

に

display: inline-block;

フィドル: http://jsfiddle.net/aqAVy/

それで解決するはずです。

于 2013-10-31T13:59:39.677 に答える