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/
如果是，那么您需要混合浮动左/右/无并显示（而不是阻止）并从样式表中清楚地调度它们。

  .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

这有效 - 添加 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>
于 2013-06-07T07:51:13.623 回答
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 回答