如何在tile中浮动不同大小的元素 [英] How can I float elements with different size in a tile
问题描述
问题很简单。我有一堆要做一个瓷砖的元素。然而，它们中的一些具有更长的高度;让我们说的是其他人的两倍。
以下是我所拥有的：
这是我想要的：
/ p>
这是我的代码：
<！DOCTYPE html&
< html>
< head>
< style type =text / css>
div {
box-shadow：0 0 1px black inset;
width：100px;
display：inline-block;
}
＃d1，
＃d2，
＃d4，
＃d5，
＃d6，
＃d8，
＃d9 {
height：100px;
background-color：yellow;
}
＃d7，
＃d3 {
height：200px;
background-color：red;
}
< / style>
< / head>
< body>
< div id =d1> 1< / div>< div id =d2> 2< / div>< div id =d3> 3< / div> ; div id =d4> 4< / div>< div id =d5> 5< / div>< div id =d6> 6< / div>< div id = d7> 7< / div>< div id =d8> 8< / div>< div id =d9> 9< / div>
< / body>
< / html>
您可以在JSBin上试用： http://jsbin.com/usovek/1/edit
注意：
- 内容是动态的
- >
- 任何框都可以更长。
- 框的宽度或高度始终是单位数。在这个例子中的单位是50，一些盒子是50，一些其他是100px高。但是如果问题解决了任何数量的单位（1,2,3 ...，50px，100px，150px，...）将是完美的。
如果你的内容是静态的，你可以在一个相对定位的容器中使用位置绝对块，但如果内容是动态的，你不能用CSS （仅），您需要使用的是
或者您最好的办法是 strong>
CSS
＃d7，
＃d3 {
height：200px
background-color：red;
float：left;
}
第三种可能性：
包装箱子，
演示 （仅限可能事物是静态的）：）
The question is simple. I have a bunch of elements that are going to make a tile. However, some of them have a longer height; let's say twice as much as the other ones. I want all of them to match in a tile just by pure CSS styling.
Here is what I have:
And this is what I want:
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
box-shadow: 0 0 1px black inset;
width: 100px;
display: inline-block;
}
#d1,
#d2,
#d4,
#d5,
#d6,
#d8,
#d9{
height: 100px;
background-color: yellow;
}
#d7,
#d3{
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="d1">1</div><div id="d2">2</div><div id="d3">3</div><div id="d4">4</div><div id="d5">5</div><div id="d6">6</div><div id="d7">7</div><div id="d8">8</div><div id="d9">9</div>
</body>
</html>
And you can try it live on JSBin: http://jsbin.com/usovek/1/edit
Notes:
- The content is dynamic
- The number of boxes can vary
- Any box can be longer. And possibly wider.
- The width or height of boxes are always a number of units. The unit in this example is 50 and some boxes are 50, some others are 100px high. But It would be perfect if the problem is solved for any number of units (1,2,3... which are 50px, 100px, 150px,...)
If your content is static, you can use position absolute blocks inside a relatively positioned container, but if the content is dynamic than you cannot do this with CSS(Only), what you need to use is
Or the best you can do is this
CSS
#d7,
#d3{
height: 200px;
background-color: red;
float: left;
}
3rd Possibility: Wrap the boxes insde containers and float the accordingly
Demo (Only Possible When Things Are Static) :)
这篇关于如何在tile中浮动不同大小的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
