2

コンテナー内で上から下に DIV を垂直に配置しようとしています。コンテナーは、垂直方向に 500px までに制限する必要があります。この制限に収まらないすべての DIV は、次の行にフロートする必要があります。

<style>
#container {
    position:relative;
    background-color:red;
    max-width:500px;
    min-height:500px;
    }
#area {
    position:absolute;
    bottom: 0;
    background-color:yellow;
    margin:20px;
    width:100px;
    height:100px;

}
</style>

<div id="container">
    <div id="area1">area1</div>
    <div id="area2">area2</div>
    <div id="area3">area3</div>
    <div id="area4">area4</div>
    <div id="area5">area5</div>
    <div id="area6">area6</div>
</div>

私のプレーニング結果は次のようになります。

    ---------------------------->
    | -------- --------
    | |Area 1| |Area 5|
    | -------- --------
    | -------- --------
max | |Area 2| |Area 6|
500 | -------- --------
 px | --------
    | |Area 3|   etc..
    | --------
    | --------             /\
    | |Area 4|   etc....... |
    | --------   
    --------------------------->

私の質問は次のとおりです:私は何を間違っていますか?実装できるかどうか? ありがとうございました！

4

3 に答える 3

2

CSS 列は、最初は有望なソリューションのように見えますが、領域が追加または削除されてもコンテナーの幅を自動的に調整しません。

私の提案は、div を垂直ではなく水平に積み重ねるように、右から左に配置することです。これは、 で簡単に実現できfloat:rightます。それができたら、コンテナー全体を 90 度回転させて、同等の垂直レイアウトを得ることができます。しかし、エリアの div はすべて間違った向きになっているため、これらの 90 度を反対方向に回転させる必要もあります。

このようなもの：

#container {
  position:relative;
  background-color:red;
  max-width:500px;
  margin-left:-500px;
  max-height:500px;
  overflow:hidden;
  -webkit-transform:rotate(-90deg);
  -webkit-transform-origin:top right;
  -ms-transform:rotate(-90deg);
  -ms-transform-origin:top right;
  transform:rotate(-90deg);
  transform-origin:top right;
  padding:20px 0 0 20px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#area {
  background-color:yellow;
  margin:0 20px 20px 0;
  width:100px;
  height:100px;
  float:right;
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

フィドルの例

コンテナーのネガmargin-leftに注意してください。これは、回転後に位置を調整します。これは、コンテナーの「高さ」(つまり、max-widthプロパティ) と一致する必要があります。このmax-heightプロパティは、コンテナがクリップされる前に到達する最大の「幅」を表します。フローティングのoverflow:hidden子要素を含むようにコンテナーを強制的に拡張するには、 が必要です。

また、エリアの div がフローティングになっているため、それらの間のマージンが崩れないことに注意してください。これを解決する 1 つの方法は、マージンを 2 辺のみに制限し (私は右と下を使用しました)、コンテナのパディングを使用して反対側のマージンをエミュレートすることbox-sizing:border-boxです。

最後に、この特定の例では、エリア div のアスペクト比は 1:1 です。つまり、回転後に再配置することを心配する必要はありません。幅と高さが異なると、少し複雑になります。

このソリューションは古いバージョンの IE では機能しませんが、少なくとも IE9 はサポートしています。

于 2013-05-01T12:38:41.977 に答える
-1 

    #container {
      background-color: red;
      max-width: 330px;
      max-height: 300px;
      padding: 20px;
      overflow:auto;
    }

    .area {
      background-color: yellow;
      display: inline-block;
      height: 70px;
      margin-bottom: 21px;
      text-align: center;
      width: 70px;
    }

    .x {
      background-color: cyan;
      height: 30px;
      width: 90px;
    }

    .Z {
      background-color: grey;
      height: 300px;
      width: 190px;
    }
    <div id="container">
      <div class="area">area1</div>
      <div class="area">area2</div>
      <div class="area x">area3</div>
      <div class="area">area4</div>
      <div class="area x">area5</div>
      <div class="area Z">area6</div>
    </div>

于 2015-04-15T17:12:36.487 に答える