0

CSSを使用してこのレイアウトを整理し、divをフローティングしようとしています。標準サイズの箱には、大きな箱と背の高い箱があります。これはjsfiddleです

私はこのマークアップを持っています -

<head>
    <style type="text/css">
    .boxesHolder 
    {   width:970px;
        border:1px solid green;
        margin-left:auto;
        margin-right:auto;
        background-color:#06C;}
    .boxes
    {   border:1px solid blue;  
        margin:5px; 
        background-color:#FFF;}

    .stand {width:230px; height:180px;}
    .large {width:474px; height:372px;}
    .tall { width:230px height:372px;}
    .fLeft{float:left;}
    .fRight{float:right;}
    .clear {clear:both;}

    </style>
 </head>

 <body>

    <div class = "boxesHolder">

        <div class = "boxes stand fLeft">1</div>
        <div class = "boxes stand fRight">3</div>
        <div class = "boxes large fRight">2</div>
        <div class = "boxes stand fLeft">4</div>
        <div class = "boxes stand fLeft">5</div>
        <div class = "boxes stand fLeft">6</div>
        <div class = "boxes stand fLeft">7</div>

    <div class ="clear"></div>
    </div>

 </body>

まだ評判ポイントがないので、レイアウトの画像を投稿できません...

右下のスペースに背の高いボックスを追加したいだけです。私はそれを解決することができません。絶対配置ボックスでそれを行う必要がありますか? 最善のアプローチは何ですか。テーブルレイアウトで簡単だったでしょう！

4

3 に答える 3

0

このようなことを達成しようとしていますか？
http://jsfiddle.net/GCyrillus/fvzaF/
yes の場合、float left/right/none と display (ブロックではない) を混合し、スタイル シートから明確にディスパッチする必要があります。

  .boxesHolder {
       width:970px;
       border:1px solid green;
       margin-left:auto;
       margin-right:auto;
       background-color:#06C;
   }
   .boxes {
       border:1px solid blue;
       margin:5px;
       background-color:#FFF;
   }
   .stand {
       width:230px;
       height:180px;
   }
   .large {
       width:474px;
       height:372px;
   }
   .tall {
       width:230px height:372px;
   }
   .fLeft {
       float:left;
   }
   .fRight {
       float:right;
       clear:right
   }
   .clear {
       clear:both;
   }
   div div:before {
       content:attr(class);
   }
   div:nth-child(4), div:nth-child(5) {
       float:none;
       display:inline-block;
       margin:5px 3px;
   }
于 2013-06-06T16:58:48.973 に答える
0

これを試してください：http://jsfiddle.net/fCc5d/1/

そして、ここにhtmlがあります：

<div class = "boxesHolder">

        <div class = "boxes stand fRight">1</div>
        <div class = "boxes stand fRight">3</div>        
        <div class = "boxes stand fRight">4</div>
        <div class = "boxes stand fRight">5</div>
        <div class = "boxes large fRight">2</div>
        <div class = "boxes stand fRight">6</div>
        <div class = "boxes stand fRight">7</div>
        <div class = "boxes stand fRight">8</div>
        <div class = "boxes stand fRight">9</div>

    <div class ="clear"></div>
 </div>

必要に応じて数字を変更できます。

于 2013-06-06T16:48:59.307 に答える
0

これは機能します - 左に浮いている3列のdivを追加し、ボックスのdivを内側に追加します。jsフィドル

 <head>
    <style type="text/css">
    .boxesHolder 
    {   width:928px;
        border:1px solid green;
        margin-left:auto;
        margin-right:auto;
        background-color:#06C;
        padding:5px;}
    .boxes
    {   border:1px solid red;   
        background-color:#FFF;
        margin:0px;}

    .stand {width:230px; height:180px;}
    .large {width:462px; height:362px;}
    .tall { width:230px; height:362px;}
    .fLeft{float:left;}
    .clear {clear:both;}


    </style>
    </head>

    <body>

    <div class = "boxesHolder">

        <div class = "col fLeft">
            <div class = "boxes stand"></div>
            <div class = "boxes stand"></div>
            <div class = "boxes stand"></div>
        </div>

        <div class = "col fLeft">
            <div class = "boxes large"></div>
            <div class = "boxes stand fLeft"></div>
            <div class = "boxes stand fLeft"></div>
        </div>

        <div class = "col fLeft">
            <div class = "boxes stand"></div>
            <div class = "boxes tall"></div>
        </div>


    <div class ="clear"></div>
    </div>


    </body>
于 2013-06-07T07:51:13.623 に答える