CSS浮动'；盒子'；布置不同尺寸的箱子_Css_Css Float

CSS浮动'；盒子'；布置不同尺寸的箱子

css

CSS浮动'；盒子'；布置不同尺寸的箱子,css,css-float,Css,Css Float,我正在尝试使用CSS和浮动div来整理这个布局。有标准尺寸的盒子，一个大盒子和一个高盒子。这是我有这个标记- <head> <style type="text/css"> .boxesHolder { width:970px; border:1px solid green; margin-left:auto; margin-right:auto; background-co

我正在尝试使用CSS和浮动div来整理这个布局。有标准尺寸的盒子，一个大盒子和一个高盒子。这是

我有这个标记-

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


拳击手
{宽度：970px；
边框：1px纯绿色；
左边距：自动；
右边距：自动；
背景色：#06C；}
.盒子
{边框：1px纯蓝色；
保证金：5px；
背景色：#FFF；}
.支架{宽度：230px；高度：180px；}
.大{宽：474px；高：372px；}
.高{宽：230px高：372px；}
.fLeft{float:left；}
.fRight{float:对；}
.clear{clear:两者；}
1.
3.
2.
4.
5.
6.
7.

我不能发布布局的图片，因为我还没有获得任何声誉点

我只想在右下方的空白处添加一个高框。我就是想不出来。我应该用绝对定位的盒子吗？最好的方法是什么。如果有一个表布局，那就很容易了

试试这个：

以下是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>


1.
3.
4.
5.
2.
6.
7.
8.
9

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

您是否正在尝试实现类似的目标？

如果是，则需要混合浮动左/右/无并显示（非块）并从样式表中清楚地发送它们。

此操作有效-添加3个向左浮动的列div，框内为div


拳击手
{宽度：928px；
边框：1px纯绿色；
左边距：自动；
右边距：自动；
背景色：#06C；
填充：5px；}
.盒子
{边框：1px纯红；
背景色：#FFF；
边距：0px；}
.支架{宽度：230px；高度：180px；}
.大{宽：462px；高：362px；}
.高{宽：230px；高：362px；}
.fLeft{float:left；}
.clear{clear:两者；}

html中的高框在哪里？他需要的是在右下角得到一个方框div 8。谢谢，高框不见了，因为我不知道放在哪里。高框类。高框需要进入空间。如果您不需要此网格设置的不同变体，可以通过设置负上边距来调整它。正如您在演示中看到的，还有一些地方不正确：大盒子下面的第二个盒子的边距太短了一像素。如果您想要不同的变体，最好查看现有的备选方案，如。如果您发现自己在想，“这对表来说很容易”，请尝试添加另一层div，这些div是.boxesHolder的直接子项，即“列”（浮动div），然后在这些div中浮动.box（根据需要）。布局仍然不一定会按HTML中的顺序显示，但从当前的标记来看，您似乎并不关心这一点，您将能够让它以您想要的方式显示。干杯，Gimmy-这不是我想要的。在我的示例中，右下角缺少一个高div。那应该是高级别的。我认为最好是为按@BjornJohnson浮动的列设置额外的外部div

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

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