Fatal编程技术网
  • css/
  • 可变高度的CSS浮动div

可变高度的CSS浮动div

css html

可变高度的CSS浮动div,css,html,css-float,Css,Html,Css Float,我有无限多个100像素宽的div，可以放入250像素宽的父级。无论高度如何，我都需要按行显示div，如图所示。我试图解决这个问题，但div的高度似乎把它搞砸了 我非常感谢你的帮助。谢谢：） #持有者{ 宽度：250px； 边框：1px点蓝色； 显示：内联块； } .盒子{ 宽度：100px； 高度：150像素； 背景色：#CCC； 浮动：左； 文本对齐：居中； 字体大小：45px； 显示：内联块； } .一{ 背景色：#0F0； 高度：200px； } .二{ 背景色：#0FF； } .三{

我有无限多个100像素宽的div，可以放入250像素宽的父级。无论高度如何，我都需要按行显示div，如图所示。我试图解决这个问题，但div的高度似乎把它搞砸了

我非常感谢你的帮助。谢谢：）


#持有者{
宽度：250px；
边框：1px点蓝色；
显示：内联块；
}
.盒子{
宽度：100px；
高度：150像素；
背景色：#CCC；
浮动：左；
文本对齐：居中；
字体大小：45px；
显示：内联块；
}
.一{
背景色：#0F0；
高度：200px；
}
.二{
背景色：#0FF；
}
.三{
背景色：#00F；
}
.4{
背景色：#FF0；
}
1.
2.
3.
4.
这是你的电话号码

下面是我使用javascript所做的和实现的

据我所知，纯CSS（适用于所有常见浏览器）无法解决此问题：

  • 浮动
  • 显示：内联块
  • 位置：相对
    和
    位置：绝对
    要求。如果您使用的是服务器端语言，并且您正在处理图像（或具有可预测高度的对象），那么您可以使用服务器端代码“自动”处理像素调整
相反，假设您的需求更像您的彩色示例代码，则使用。

：

.box:nth-child(odd){
    clear:both;
}
如果是3行，那么第n个孩子（3n+1）

在这个注释的帮助下（）我找到了答案

在我创建的每一行上，我都添加一个类名
left

在我创建的每一行上，我添加一个类名
right

然后，我为每个类名向左和向右浮动

唯一复杂的是，我的内容顺序在“右”行上是颠倒的，但这可以用PHP解决

谢谢大家的帮助

#支架{
宽度：200px；
边框：1px点蓝色；
显示：内联块；
}
.盒子{
宽度：100px；
高度：150像素；
背景色：#CCC；
浮动：左；
文本对齐：居中；
字体大小：45px；
}
.一{
背景色：#0F0；
高度：200px；
}
.二{
背景色：#0FF；
}
.三{
背景色：#00F；
浮动：对；
}
.4{
背景色：#FF0；
浮动：对；
}
.left{float:left；}
.right{float:right；}

1.
2.
4.
3.
多亏了thirtydot，我意识到我之前的回答没有正确解决问题。这是我的第二次尝试，它利用JQuery作为CSS唯一的解决方案似乎是不可能的：

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function() {
                var numberOfColumns = 3;
                var numberOfColumnsPlusOne = numberOfColumns+1;
                var marginBottom = 10;  //Top and bottom margins added
                var kids = $('#holder:first-child').children();
                var add;
                $.each(kids, function(key, value) {
                    add = numberOfColumnsPlusOne+key;
                    if (add <= kids.length){
                        $('#holder:first-child :nth-child('+(numberOfColumnsPlusOne+key)+')').offset({ top: $('#holder:first-child :nth-child('+(key+1)+')').offset().top+$('#holder:first-child :nth-child('+(key+1)+')').height()+marginBottom });
                    }
                });
            });             
        </script>
        <style>
            #holder{
                width:270px;
                border:1px dotted blue;
                display:inline-block; /* Enables the holder to hold floated elements (look at dotted blue line with and without */
            }
            .box{
                width:80px;
                height:150px;
                background-color:#CCC;
                margin:5px;
                text-align:center;
                font-size:45px;
            }
            .one{
                height:86px;
            }
            .two{
                height:130px;
            }
            .three{
                height:60px;
            }
            .four{
                clear:both;
                height:107px;
            }
            .five{
                height:89px;
            }
            .six{
                height:89px;
            }
            .left{float:left;}
            .right{float:right;}
        </style>
    </head>
    <body>      
        <div id="holder">
            <div class="box one left">1</div>
            <div class="box two left">2</div>
            <div class="box three left">3</div>
            <div class="box four left">4</div>
            <div class="box five left">5</div>
            <div class="box six left">6</div>
        </div>
    </body>
</body>


$（文档）.ready（函数（）{
var numberOfColumns=3；
var numberofcolumnspusone=numberOfColumns+1；
var marginBottom=10；//添加了上下页边距
var kids=$（'#holder:first child'）.children（）；
var-add；
$。每个（子项、函数（键、值）{
add=numberOfColumnSpusOne+键；

如果（add正如已经正确指出的那样，仅使用CSS是不可能的……谢天谢地，我现在在中找到了一个解决方案


它似乎完全解决了这个问题。
在现代浏览器上，您只需执行以下操作：


display: inline-block;
vertical-align: top;



如果有人仍在寻找替代方案，这里有一个。尝试使用（-moz-/-webkit-）列宽属性。它会解决可变div高度问题。但是列宽会在列的末尾添加新的div


除此之外，jQuery砌体工程效果最好。
这可能不是每个人都能找到的确切解决方案，但我发现（非常确切地说）在许多情况下，跳出框框思考是有效的：在许多情况下，您可以先填充左栏，然后再填充中间的框，最后用框填充右栏，而不是从左到右显示框。
您的图像将是：

:

如果您使用的是像php这样的脚本语言，您也可以从左到右填充列，方法是在其中添加一个新框，并在填充所有列时输出。例如（未测试的php代码）：


$col1='box1'；
$col2='box2'；
$col3='box3'；
$col1.='box4'；//最后一次关闭col1 div
$col2.='box5'；
$col3.='box6'；
echo$col1.$col2.$col3；


$col1、$col2和$col3可以有float:left和width:33%，将div内的框设置为全宽和无float


显然，如果您使用javascript/jquery动态加载框，那么您最好也采用这种方式设置它们的样式，正如本线程的其他答案所解释的那样。
我提供这个答案，因为即使有好的解决方案（）仍然不清楚为什么不能通过使用浮动来实现这一点

（这很重要-#1）

一个浮动的元素将尽可能地向左或向右移动
最初的位置

这样说吧：

我们有两个分区


<div class="div5">div5</div>
<div class="div6">div6</div>

.div-blue{
    width:100px;
    height:100px;
    background: blue;
}

.div-red{
    width:50px;
    height:50px;
    background: red;
}


我们有这个



如果我们将
clear:right
设置为
div5
，我们将强制它使用下面的行
div4



和
div6
将在新行中浮动，无论是向右还是向左

现在让我们用一个问题作为例子，这个问题是由于一个重复的问题把我带到这里来的

下面是测试它的代码段：



div{
宽度：24%；
保证金权利：1%；
浮动：左；
边缘顶部：5px；
颜色：#fff；
字体大小：24px；
文本对齐：居中；
}
.一{
背景色：红色；
高度：50px；
}
.二{
背景颜色：绿色；
高度：40px；
}
.三{
背景颜色：橙色；
高度：55px；
}
.4{
背景色：洋红色；
他

$col1 = '<div class="col1"> <div>box1</div>';
$col2 = '<div class="col2"> <div>box2</div>';
$col3 = '<div class="col3"> <div>box3</div>';
$col1 .= '<div>box4</div> </div>'; //last </div> closes the col1 div
$col2 .= '<div>box5</div> </div>';
$col3 .= '<div>box6</div> </div>';
echo $col1.$col2.$col3;



<div class="div5">div5</div>
<div class="div6">div6</div>

.div-blue{
    width:100px;
    height:100px;
    background: blue;
}

.div-red{
    width:50px;
    height:50px;
    background: red;
}



<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>

.div-gree{
    width:150px;
    height:150px;
    background: green;

    float:right;
}



 .Your_Outer {
    background-color: #FFF;
    border: 1px solid #aaaaaa;
    float: none;
    display:inline-block;
    vertical-align:top;
    margin-left: 5px;
    margin-bottom: 5px;
    min-width: 152.5px;
    max-width: 152.5px;
}