当前位置： 文江博客话题详情

如何用 CSS 制作浮动顶部？

发布于 2024-08-13 16:44:02 字数 314 浏览 3 评论 0原文

我知道CSS只支持浮动属性的左值和右值，但是有没有一种技术可以实现浮动顶部？我会尽力解释。我有以下代码：

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

使用此代码，每个 div 都会向左浮动，直到达到页面的右限。我想做同样的事情，但垂直，这样每个 div 都放置在前一个 div 的底部，然后，当达到页面的底部限制时，创建一个新列。有没有办法只使用CSS（并且可能编辑HTML代码）来做到这一点？

原文

I know that CSS only supports left and right values for the float property, but is there a technique to implement a floating top? I will try to explain. I have the following code:

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

With this code every div is floated to left until the right limit of the page is reached. I want to do the same thing but vertically, so that every div is placed at the bottom of the previous one and then, when the bottom limit of the page is reached, a new column is created. Is there a way to do this using only CSS (and maybe editing the HTML code)?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（15）

梦在深巷 2024-08-20 16:44:02

只需使用vertical-align：

.className {
    display: inline-block;
    vertical-align: top;
}

Simply use vertical-align:

.className {
    display: inline-block;
    vertical-align: top;
}
回复 原文
堇色安年 2024-08-20 16:44:02

仅使用 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 之间分发内容。

The only way to do this with CSS only is by using CSS 3 which is not going to work on every browser (only the latest generation like FF 3.5, Opera, Safari, Chrome).

Indeed with CSS 3 there's this awesome property : column-count that you can use like so :

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

If #myContent is wrapping your other divs.

More info here : http://www.quirksmode.org/css/multicolumn.html

As you can read there, there are serious limitations in using this. In the example above, it will only add up to one another column if the content overflows.
in mozilla you can use the column-width property that allows you to divide the content in as many columns as needed.

Otherwise you'll have to distribute the content between different divs in Javascript or in the backend.

回复 原文
帥小哥 2024-08-20 16:44:02

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

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

Hugogi Raudel has came up with an interesting way to to achieve this by CSS. suppose here is our HTML markup:

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

You can achieve a 3-row column using this CSS code:

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

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

And here is the end result:
enter image description here
What we are doing here is adding a appropriate margin for each item in the row. This approach limitation is that you have to determine the column row count. it's not going to be dynamic. I'm sure it has use cases so I included this solution here.

回复 原文
提赋 2024-08-20 16:44:02

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

如果你想在彼此下面显示 div，你必须这样做:

<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>

There is no float:top, only float:left and float:right

If you wish to display div underneath each other you would have to do:

<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>
回复 原文
乖乖 2024-08-20 16:44:02

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

小提琴： 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 应该可以帮助一些人。

I tried this just for fun - because I too would like a solution.

fiddle: 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 */
}

I You can see this will work with taller/wider divs. Just have to think sideways. I imagine positioning will become an issue. transform-origin should help some with it.

回复 原文
拥抱影子 2024-08-20 16:44:02

这有效，适用于 ul：

display:flex;
flex-direction:column;
flex-wrap:wrap;

This works, apply in ul:

display:flex;
flex-direction:column;
flex-wrap:wrap;
回复 原文
浅听莫相离 2024-08-20 16:44:02

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

I think the best way to accomplish what you're talking about is to have a set of divs that will be your columns, and populate those in the way you described. Then fill those divs vertically with the content you're talking about.

回复 原文
像极了他 2024-08-20 16:44:02
<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

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

But if the number of div's elements is not fixed or you don't know how much it could be, you still need JS. use jQuery :even, :odd

回复 原文
尘世孤行 2024-08-20 16:44:02

我只是用 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>

I just make with JQuery.

I tested in Firefox and IE10.

In my problem the items have different heights.

<!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>
回复 原文
感性不性感 2024-08-20 16:44:02

要使用 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
   }

To achieve this using CSS3, it will not be that hard as long as I am understanding you properly. Let us say that the HTML DIV's looks like this:

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

And the CSS would be as followed. What the following CSS will do is make your DIV execute a float left, which will "stick" it to the left of the Parent DIV element. Then, you use a "top: 0", and it will "stick it " to the top of the browser window.

  #rightDIV {
       float: left
       top: 0
    }
  #leftDIV {
       float: right;
       top: 0
   }
回复 原文
花心好男孩 2024-08-20 16:44:02

对我有用的技巧是在 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>

The trick that worked for me was to change the writing-mode for the duration of the div-alignment.

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

回复 原文
恋竹姑娘 2024-08-20 16:44:02

这是一个在 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>

技巧是 p 和 column- 上的 page-break-inside:void; body 上的宽度。它带有动态列数。 a 中的文本可以是多行，并且块可以具有不同的高度。

也许有人有 Edge 和 IE 的东西

Here is a solution which works (almost perfect) in 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>

The trick is page-break-inside: avoid; on p and column-width on body. It comes with dynamic column count. Text in a may be multi-line and blocks may have different heights.

Maybe someone has something for Edge and IE

回复 原文
╰つ倒转 2024-08-20 16:44:02

您也许可以使用同级选择器做一些事情，例如：

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

没有尝试过，但这可能会使第四个 div 向左浮动，也许可以做您想做的事情。再次不完全支持。

You might be able to do something with sibling selectors e.g.:

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

Not tried it but this might float the 4th div left perhaps doing what you want. Again not fully supported.

回复 原文
数理化全能战士 2024-08-20 16:44:02

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

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>

I know this question is old. But anyone looking to do it today here you go.

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>

回复 原文
月依秋水 2024-08-20 16:44:02

这对我有用：

margin-bottom: auto;

This works for me:

margin-bottom: auto;
回复 原文
~没有更多了~

关于作者

猫烠⑼条掵仅有一顆心

暂无简介

0 文章
0 评论
830 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_FjTq5B

文章 0 评论 0

18273202778

文章 0 评论 0

WordPress小学生

文章 0 评论 0

〃温暖了心ぐ

文章 0 评论 0

迷乱花海

文章 0 评论 0

niuniu

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文