如何使用CSS制作浮顶？

68

我知道CSS仅支持float属性的left和right值，但是有没有一种技术可以实现float top？我会尽力解释。我有以下代码：

<div style="float:left">
<div style="float:left">
<div style="float:left">
....

使用此代码，每个div都会向左浮动，直到达到页面的右侧限制。我想垂直做同样的事情，以便将每个div放在上一个div的底部，然后在达到页面的底部限制时创建一个新列。有没有一种方法可以仅使用CSS（甚至可以编辑HTML代码）来做到这一点？

html  css  css-float 
— mck89
source
4
一个非常有趣的问题。不管我有多大的想像力，我都找不到用纯HTML和CSS做到这一点的方法。有兴趣看看是否有任何事情发生。
— 佩卡
您如何创建页面的底部限制？这些div是否要放在固定高度的容器中？
— Rudism
是的，容器的高度是固定的
— mck89 2009年
听起来您可能需要突破javascript库。
— tybro0103 2010年

Answers:

30

仅使用CSS做到这一点的唯一方法是使用CSS 3，它不会在所有浏览器上都起作用（仅适用于FF 3.5，Opera，Safari，Chrome等最新一代的浏览器）。

确实，在CSS 3中，有一个很棒的属性：column-count，您可以像这样使用：

#myContent{
  column-count: 2;
  column-gap: 20px;
  height: 350px;
}

如果#myContent正在包装其他div。

此处有更多信息：http : //www.quirksmode.org/css/multicolumn.html

如您在此处所读，使用此功能存在严重限制。在上面的示例中，如果内容溢出，则只会添加多达一列。在mozilla中，您可以使用column-width属性，该属性使您可以根据需要将内容分为多个列。

否则，您将不得不在Javascript或后端的不同div之间分发内容。

— 纪尧姆·佛兰德（Guillaume Flandre）
source
谢谢，我不知道。也许我可以找到在旧版浏览器中实现这些属性的方法。
— mck89 2009年
mck89-要在旧版浏览器中实施，您可能需要使用javascript。
— Moshe
16

Hugogi Raudel提出了一种有趣的方法来实现这一目标CSS。假设这是我们的HTML标记：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li> 
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

您可以使用以下CSS代码实现3行列：

li:nth-child(3n+2){
  margin: 120px 0 0 -110px;
}

li:nth-child(3n+3) {
  margin: 230px 0 0 -110px;
}

这是最终结果：
在此处输入图片说明
我们在这里所做的是为行中的每个项目添加适当的边距。这种方法的局限性在于您必须确定列的行数。它不会是动态的。我确定它有用例，所以我在这里包括了这个解决方案。

— 阿拉什·米兰尼（Arash Milani）
source
8

没有float:top，只有float:left和float:right

如果要在彼此下方显示div，则必须执行以下操作：

<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>
— 詹姆斯·古德温
source
6

我尝试这个只是为了好玩-因为我也想要一个解决方案。

小提琴：http：//jsfiddle.net/4V4cD/1/

的HTML：

<div id="container">
<div class="object"><div class="content">one</div></div>
<div class="object"><div class="content">two</div></div>
<div class="object"><div class="content">three</div></div>
<div class="object"><div class="content">four</div></div>
<div class="object tall"><div class="content">five</div></div>
<div class="object"><div class="content">six</div></div>
<div class="object"><div class="content">seven</div></div>
<div class="object"><div class="content">eight</div></div>
</div>

CSS：

#container { 
    width:300px; height:300px; border:1px solid blue;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}

.object {
    float:left;
    width:96px;
    height:96px;
    margin:1px;
    border:1px solid red;
    position:relative;
}

.tall {
    width:196px;
}

.content {
    padding:0;
    margin:0;
    position:absolute;
    bottom:0;
    left:0;
    text-align:left;
    border:1px solid green;
    -webkit-transform-origin: 0 0;
    transform:rotate(-70deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */
    -o-transform:rotate(-90deg); /* Opera */
}

我您可以看到这适用于较高/较高的div。只是侧身思考。我想定位将成为一个问题。transform-origin应该对此有所帮助。

— 罗恩
source
2

我认为完成您所讨论内容的最佳方法是拥有一组将作为您的列的div，并以您描述的方式填充这些div。然后，将您正在谈论的内容垂直填充到这些div中。

— 安迪斯梅
source
2 
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>

block {width:300px;}
blockLeft {float:left;}
blockRight {float:right;}

但是，如果div的元素数量不是固定的，或者您不知道它的数量，您仍然需要JS。使用jQuery :even，:odd

— Glazsasha
source
2

我只是用JQuery做的。

我在Firefox和IE10中进行了测试。

我的问题是物品的高度不同。

<!DOCTYPE html>
<html>
<head>
    <style>
        .item {
            border: 1px solid #FF0;
            width: 100px;
            position: relative;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
    <script>
        function itemClicked(e) {
            if (navigator.appName == 'Microsoft Internet Explorer')
                e.removeNode();
            else
                e.remove();
            reposition();
        }

        function reposition() {
            var px = 0;
            var py = 0;
            var margeY = 0;
            var limitContainer = $('#divContainer').innerHeight();
            var voltaY=false;

            $('#divContainer .item').each(function(key, value){
                var c = $(value);

                if ((py+c.outerHeight()) > limitContainer) {
                    px+=100;
                    margeY-=py;
                    py=0;
                    voltaY=true;
                }

                c.animate({
                    left:px+'px',
                    top:margeY+'px'
                });

                voltaY=false;
                py+=c.outerHeight();
            });
        }

        function addItem() {
            $('#divContainer').append('<div class="item" style="height: '+Math.floor(Math.random()*3+1)*20+'px;" onclick="itemClicked(this);"></div>');
            reposition();
        }

    </script>
    <div id="divMarge" style="height: 100px;"></div>
    <div id="divContainer" style="height: 200px; border: 1px solid #F00;">
        <!--div class="item"></div-->
    </div>
    <div style="border: 1px solid #00F;">
        <input type="button" value="Add Item" onclick="addItem();" />
    </div>
</body>
</html>
— Flavio Sousa
source
2

要使用CSS3做到这一点，只要我能正确理解你，就不会那么困难。让我们说HTML DIV看起来像这样：

<div class="rightDIV">
   <p>Some content</p>
<div>
<!-- -->
<div class="leftDIV">
   <p>Some content</p>
</div>

和CSS将如下所示。以下CSS会做的是使您的DIV执行向左浮动，这会将其“粘贴”到父DIV元素的左侧。然后，使用“ top：0”，它将“粘贴”到浏览器窗口的顶部。

  #rightDIV {
       float: left
       top: 0
    }
  #leftDIV {
       float: right;
       top: 0
   }
— 杰森
source
2

对我有用的技巧是在div对齐期间更改书写模式。

.outer{  
  /* Limit height of outer div so there has to be a line-break*/
  height:100px;
  
  /*  Tell the browser we are writing chinese. This makes everything that is text
  top-bottom then left to right. */
  writing-mode:vertical-lr;

}

.outer > div{
  /* float:left behaves like float:top because this block is beeing aligned top-bottom first 
  */
  float:left;
  width:40px;  
  
  /* Switch back to normal writing mode. If you leave this out, everything inside the
  div will also be top-bottom. */
  writing-mode:horizontal-tb;

}
<div class="outer">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>
展开摘要

— 卡尔斯·朋友
source
2

这项工作适用于ul：

display:flex;
flex-direction:column;
flex-wrap:wrap;
— 罗尼
source
2

这是在FF，Opera，Chrome中可以（几乎完美）运行的解决方案：

    <style>
        html {
            height:100%;
        }

        p {
            page-break-inside: avoid;
            text-align: center;
            width: 128px;display:inline-block; 
            padding: 2px;
            margin: 2px;
            border: 1px solid red; 
            border-radius: 8px;
        }

        a {
            display: block;
            text-decoration: none;
        }

        b {
            display: block;
            color: red;
        }

        body {
            margin: 0px;
            padding: 1%;
            height: 97%; /* less than 98 b/c scroolbar */
            -webkit-column-width: 138px;
            -moz-column-width: 138px;
            column-width: 138px;
       }
    </style>

    <body>
        <p>
            <b>title 1</b>
            <a>link 1</a>
            <a>link 2</a>
            <a>link 3</a>
            <a>link 4</a>
        </p>

        <p>
            <b>title 2</b>
            <a>link 1</a>
            <a>link 2</a>
            <a>link 3</a>
            <a>link 4</a>
            <a>link 5</a>
        </p>
    </body>

诀窍是page-break-inside: avoid;在p和column-width上body。它带有动态列数。中的文本a可能是多行，并且块的高度可能不同。

也许有人对Edge和IE有用

— 用户名
source
0

您可能可以使用同级选择器执行某些操作，例如：

div + div + div + div{
float: left
}

没试过，但是这可能会使第4格浮动，也许您想做些什么。再次不完全支持。

— Matpol
source
这不是我想要的，但这是一个非常有趣的效果:)
— mck89
0

我知道这个问题很旧。但是今天想要这样做的任何人都可以。

div.floatablediv{
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
}
div.floatcontainer{
  -webkit-column-count: 2;
	-webkit-column-gap: 1px;
	-webkit-column-fill: auto;
	-moz-column-count: 2;
	-moz-column-gap: 1px;
	-moz-column-fill: auto;
	column-count: 2;
	column-gap: 1px;
	column-fill: auto;
}
<div style="background-color: #ccc; width: 100px;" class="floatcontainer">
  <div style="height: 50px; width: 50px; background-color: #ff0000;" class="floatablediv">
  </div>
    <div style="height: 70px; width: 50px; background-color: #00ff00;" class="floatablediv">  
  </div>
    <div style="height: 30px; width: 50px; background-color: #0000ff;" class="floatablediv">  
  </div>
    <div style="height: 40px; width: 50px; background-color: #ffff00;" class="floatablediv">  
  </div>
  <div style="clear:both;"></div>
</div>
展开摘要

— 更好的玩家
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.