1

私は次のHTMLを持っています:

 <div class="top_buttons">

    <div class="top_button">
        <img src="img/image1.png">
    </div>

    <div class="top_button">
        <a href="#">
            <img src="img/image2.png">
        </a>
    </div>

    <div class="top_button">
        <a href="#">
            <img src="img/image3.png">
        </a>
    </div>

</div>

そして、完全に機能する次のCSS：

.top_buttons{

    width: 100%;
    height: auto;

    margin: 0 auto;

    overflow: hidden;
}

 .top_button{

     float: left;
     width: 33.333%;/*Because I have 3 images with the same width, I want each to have 1/3 of the total width space available (mobile website)*/
 }

問題は、内側の div (つまり、画像の親) にマージンやパディングを追加したいときに発生します。これらの div に境界線/パディング/マージンを追加すると、設定した上記の 33.333% は機能しなくなります。明らかに、各「top_button」div には画像だけでなく、div に追加された境界線/パディング/マージンも含まれるためです。

したがって、私の一時的な解決策は、その割合を 31% 程度に減らすことでした。ただし、携帯電話によっては、多かれ少なかれピクセルが画面の右側に残ります。パーセンテージの観点から、追加の境界線/パディング/マージンを使用して div の長さを推測しようとしているだけです。私が欲しいのは、ボーダー/パディング/マージンを内側の div に設定しても 33.333% を使用できるソリューションであり、ピクセルに完全な水平方向の配置を実現できます。

要するに、 divにもボーダー/パディング/マージンがあり、「top_button * s *」divの合計幅がわからないことを知って、「n」divを水平に配置するにはどうすればよいですか(表示の幅が異なるため)電話画面によって異なります）。

4

3 に答える 3

2

現在の標準的なボックスモデルの動作は、質問で説明したものです。幅を定義しても、要素が幅の値と同じ幅になるわけではありません。代わりに、パディングなどが追加されます。

より直感的な動作を実現するには、別のボックス モデルが必要です。幅を定義すると、可能なすべてのパディング、境界線などで実際に幅を定義することになります。

次の CSS はまさにこれに必要なものです。この CSS は、すべての要素に対して代替ボックス モデルを有効にすることに注意してください。必要な要素に対してそれらを定義することもできますが、1 つのプロジェクトで 2 つの異なるアプローチをいじる必要があります。

*, ::before, ::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-02-04T21:13:21.757 に答える
2

ボックスサイジングを使用します。ボックスのサイズ変更により、幅を壊すことを心配することなく、パディングとボーダーを追加できます。ただし、マージンは依然として配置を崩します。マージンを考慮するには、要素の幅からマージンの量を差し引く必要があります。

.top_button{
     float: left;
     width: 33.333%;
     -moz-box-sizing: border-box;      
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
 }
于 2013-02-04T21:13:59.093 に答える
0

ボックスのサイズ変更でブラウザー間の互換性の問題が発生した場合は、代替手段があります。ボタンごとに、マージンを適用できる追加の「内部」divが必要です。

HTML:

    <div class="top_button">
      <div class="top_button_contents">
        <a href="#">
          <img src="img/image2.png" /> some button text for testing
        </a>
      </div>
    </div>

CSS:

.top_button {
  float: left;
  width: 33.333%;
}

.top_button .top_button_contents {
  position:relative;
  margin:0px 10px 0px 0px;
  background-color:#CCC;
}

.top_button.last .top_button_contents {
 margin:0px;
}

ここにjFiddleがあります。

于 2013-02-04T21:23:02.100 に答える