0

私は現在、単純な設定をしています: 画面の 90% 幅のコンテナ div を中央に配置し、20% 幅の div を 5 つ含みます。これは、div がすべて行に収まる場合にうまく機能します。それらはすべて、等間隔で中央に配置されるように調整されます。ただし、ユーザーが画面のサイズを小さな幅に変更すると、5 つの div には最小幅が必要になるため、複数の行がいっぱいになり、中央に配置されなくなります。これが発生したら、最小幅を維持したいが、中央に配置して、すべてを左揃えにするのではなく、div の一番上の行の両側に青いコンテナー div が表示されるようにします (次の行についても同様です)。HTMLとCSSでこれを行うにはどうすればよいですか? ありがとう。

<style type="text/css">
.container {
  height: 220px;
  width: 90%;
  max-width: 1200px;

  margin-left: auto;   
  margin-right: auto;

  background-color: blue;
}

.box {
  position: relative;
  height: 100%;
  width: 20%;
  min-width: 200px;

  margin: 0 auto;
  float: left;

  background-color: red;
}
</style>


<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div>
4

1 に答える 1

3

フロートを使用する代わりに、display:inline-blockと組み合わせて使用​​すると、text-align:center希望する中央の効果が得られると思います。

.container 
{
    text-align:center;
}

.box 
{
    display:inline-block;
    /*For IE*/
    *display: inline;
    zoom:1;
    /*Aligns divs vertically along the top*/
    vertical-align:top;
}

例:

http://jsfiddle.net/DigitalBiscuits/pXGz3/3/

(結果ウィンドウのサイズを変更して効果を確認します)

<div>注: inline-block を使用する場合は、 s の間に改行がないことを確認してください。そうしないと、それらの間に不要なスペースが少しできます

于 2012-04-08T22:51:14.863 に答える