Html 如何使用 CSS 制作浮顶？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1847460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a float top with CSS?
提问by mck89
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:
我知道 CSS 只支持 float 属性的 left 和 right 值，但是有没有实现浮动顶部的技术？我会尽力解释。我有以下代码：
<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)?
使用此代码，每个 div 都向左浮动，直到达到页面的右侧限制。我想做同样的事情，但垂直，这样每个 div 都放在前一个的底部，然后，当达到页面的底部限制时，创建一个新列。有没有办法只使用 CSS（也许编辑 HTML 代码）来做到这一点？
采纳答案by Guillaume Flandre
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).
仅使用 CSS 做到这一点的唯一方法是使用 CSS 3，它不适用于所有浏览器（仅适用于最新一代的浏览器，如 FF 3.5、Opera、Safari、Chrome）。
Indeed with CSS 3 there's this awesome property : column-count that you can use like so :
事实上，CSS 3 有一个很棒的属性：column-count，你可以像这样使用：
#myContent{
column-count: 2;
column-gap: 20px;
height: 350px;
}
If #myContent is wrapping your other divs.
如果#myContent 正在包装您的其他 div。
More info here : http://www.quirksmode.org/css/multicolumn.html
更多信息在这里：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.
正如你在那里读到的那样，使用它存在严重的限制。在上面的例子中，如果内容溢出，它只会加起来另一列。在 mozilla 中，您可以使用 column-width 属性，该属性允许您根据需要将内容划分为多个列。
Otherwise you'll have to distribute the content between different divs in Javascript or in the backend.
否则，您将不得不在 Javascript 或后端的不同 div 之间分发内容。
回答by Abhishek Goel
Simply use vertical-align:
只需使用vertical-align：
.className {
display: inline-block;
vertical-align: top;
}
回答by Arash Milani
Hugogi Raudelhas came up with an interesting way to to achieve this by CSS. suppose here is our HTMLmarkup:
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>
You can achieve a 3-row column using this CSScode:
您可以使用以下CSS代码实现 3 行列：
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:
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.
这是最终结果：
我们在这里所做的是为行中的每个项目添加适当的边距。这种方法的限制是您必须确定列的行数。它不会是动态的。我确定它有用例，所以我在这里包含了这个解决方案。
- Here is a live demo: http://codepen.io/HugoGiraudel/pen/DoAIB
- You can read more on this in Hugo's blog post
- 这是一个现场演示：http: //codepen.io/HugoGiraudel/pen/DoAIB
- 您可以在 Hugo 的博客文章中阅读更多相关信息
回答by James Goodwin
There is no float:top, only float:leftand float:right
没有float:top，只有float:left和float:right
If you wish to display div underneath each other you would have to do:
如果您希望在彼此下方显示 div，则必须执行以下操作：
<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>
回答by Ron
I tried this just for fun - because I too would like a solution.
我只是为了好玩而尝试这个 - 因为我也想要一个解决方案。
fiddle: http://jsfiddle.net/4V4cD/1/
小提琴：http: //jsfiddle.net/4V4cD/1/
html:
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:
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.
你可以看到这将适用于更高/更宽的 div。只需要横向思考。我想定位将成为一个问题。transform-origin 应该可以帮助一些人。
回答by Flavio Sousa
I just make with JQuery.
我只是用 JQuery 制作的。
I tested in Firefox and IE10.
我在 Firefox 和 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>
回答by Jason
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:
要使用 CSS3 实现这一点，只要我正确理解您，就不会那么困难。让我们说 HTML DIV 看起来像这样：
<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.
CSS 将如下所示。下面的 CSS 会做的是让你的 DIV 执行一个向左浮动，这将把它“粘”到父 DIV 元素的左侧。然后，您使用“top: 0”，它将“粘贴”到浏览器窗口的顶部。
#rightDIV {
float: left
top: 0
}
#leftDIV {
float: right;
top: 0
}
回答by iandisme
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.
我认为完成您所谈论的内容的最佳方法是拥有一组将作为您的列的 div，并以您描述的方式填充这些 div。然后用您正在谈论的内容垂直填充这些 div。
回答by user6594402
Here is a solution which works (almost perfect) in FF, Opera, Chrome:
这是一个在 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.
诀窍是 P 上的“page-break-inside:avoid”和 BODY 上的列宽。它带有动态列数。A 中的文本可能是多行的，并且块可能具有不同的高度。
Maybe someone has something for Edge and IE
也许有人对 Edge 和 IE 有所了解
回答by KarlsFriend
The trick that worked for me was to change the writing-mode for the duration of the div-alignment.
对我有用的技巧是在 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>