Question

我正在尝试使用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>

我无法发布布局图片，因为我还没有声望点......

我只想在右下方的空间中添加高箱子。我不能解决它。我应该用绝对定位的盒子做吗？什么是最好的方法。用表格布局本来很容易！

Answer 1

试试这个：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>

您可以根据需要更改数字。

Answer 2

你试图达到这样的目的吗？ http://jsfiddle.net/GCyrillus/fvzaF/
如果是，那么你需要混合浮动左/右/无和显示（不阻止）并从样式表中清楚地发送

  .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;
   }

Answer 3

这样做 - 添加了3个向左浮动的列div，框内部为div。 jsFiddle

 <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>

CSS浮动“盒子”布局不同大小的盒子

3 个答案: