如何在div中均匀分配元素？
[英]How to distribute elements evenly inside a div?
问题描述
I have to place few elements evenly and fluidly inside another div as mocked below: 
我必须在另一个div中均匀且流畅地放置一些元素，如下所示：
I've seen the trick using text-align:justify as given in ( https://stackoverflow.com/a/6880421/2159250 ), But given one or two elements, its getting placed(justified) at right/left side as given below: (which is not what I'm looking for). 我已经看到了使用text-align：justify的窍门，如（ https://stackoverflow.com/a/6880421/2159250 ）中给出的那样，但是给定一个或两个元素，将其放置在（对齐）右边/左边在下面给出：（这不是我要的）。
Any help would be greatly appreciated. 任何帮助将不胜感激。
5 个解决方案
解决方案1
1 已采纳 2014-10-04 14:55:15
Left aligned content looks like this (one or more dots represent a whitespace): 左对齐的内容如下所示（一个或多个点表示空白）：
+----------------------------------------------+
|word.word.word.word |
+----------------------------------------------+
(1) text-align: justify does not justify the last (or the only) line*. （1） text-align: justify不证明最后一行（或唯一一行）*。 One simple solution is to add a very long word which can only fit on a line of its own: 一个简单的解决方案是添加一个非常长的单词，该单词只能适合自己的一行：
+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+
(2) You want whitespace before the first and after the last word. （2）您要在第一个单词和最后一个单词之后留空格。 One simple solution is to add dummy words in order to produce the following result: 一种简单的解决方案是添加伪单词以产生以下结果：
+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+
The desired result can be achieved by adding additional markup. 可以通过添加其他标记来获得所需的结果。 For example: 例如：
.row { text-align: justify; } .row:after { display: inline-block; content: ""; width: 100%; } .box { display: inline-block; } .dummy { display: inline-block; } /**** FOR TESTING ****/ .row { margin: 1em 0; background: #FC0; } .box { background: #F0C; width: 4em; height: 5em; } .box:nth-child(even) { background: #0CF; width: 8em; }
<div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="dummy"></div> </div> <div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="dummy"></div> </div> <div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="box"></div> <div class="dummy"></div> </div> <div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="dummy"></div> </div>
* text-align-last property could be used in the future *将来可以使用text-align-last属性
解决方案2
1 2014-10-04 18:30:32
This should be what you are looking for. 这应该是您想要的。 It requires you to wrap your row elements inside a "dummy" div, but that should be fine. 它要求您将行元素包装在“虚拟” div中，但这应该没问题。
.row { display: table; width: 100%; table-layout: fixed; margin-bottom: 10px; } .element-wrapper { display: table-cell; vertical-align: top; } .element { width: 80%; height: 100px; margin: auto; background: #ccc; }
<div class="row"> <div class="element-wrapper"> <div class="element">Toto</div> </div> <div class="element-wrapper"> <div class="element">Titi</div> </div> <div class="element-wrapper"> <div class="element">Tata</div> </div> <div class="element-wrapper"> <div class="element">Tete</div> </div> </div> <div class="row"> <div class="element-wrapper"> <div class="element">Toto</div> </div> <div class="element-wrapper"> <div class="element">Titi</div> </div> <div class="element-wrapper"> <div class="element">Tata</div> </div> </div> <div class="row"> <div class="element-wrapper"> <div class="element">Toto</div> </div> <div class="element-wrapper"> <div class="element">Titi</div> </div> </div>
解决方案3
0 2014-10-04 10:57:16
ul {
margin: 0 auto;
width:100%;
list-style: none;
position:relative;
text-align: center;
vertical-align: middle;
}
ul li {
width: 218px;
height: 218px;
display: inline-block;
background:#ccc;
margin: 40px;
border: 1px solid #d9d9d9;
box-shadow: 1px 1px 1px #f2f2f2;
position: relative;
padding:0px;
overflow:hidden;
}
解决方案4
0 2014-10-04 11:11:15
Try this code 试试这个代码
<html>
<head>
<title>my page</title>
<style type="text/css">
.new{width: 500px; height: 200px; border: 1px solid #333; text-align: center; display: table-cell; vertical-align: middle;}
.new div{width: 100px; height: 100px; border: 1px solid #300; display: inline-block;}
</style>
</head>
<body>
<div class="new">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
解决方案5
0 2014-10-04 11:57:30
you are taking this text-align:justify; 您正在使用此text-align:justify; wrong. 错误。 actually there is a difference between justify and display: inline; 对齐和display: inline;之间实际上是有区别的display: inline; . 。 if you look at the code of the person who's answer was accepted then you will find that he has used both the thing ie text-align: justify and display: inline as the properties of different element and for different purpose. 如果您查看回答被接受者的代码，那么您会发现他已经使用了两种方法，即text-align: justify和display: inline作为不同元素的属性和用于不同目的。
the place where he has used the text-align:justify; 他使用text-align:justify; property of container which tell the container to have a proper spacing between its contents and he has used display:inline; 容器的属性，它告诉容器在其内容之间具有适当的间距，并且他使用display:inline; as the property of all box es to order them to arrange in a line 作为所有框的属性，以命令它们排成一行
if you will only use display:inline then it will only display them in a line without caring about proper spacing but if you define text-align:justify; 如果只使用display:inline ，则只会在一行中显示它们，而不关心适当的间距，但是如果您定义text-align:justify; then itt will going to care about proper spacing or i should say equal padding from the border of the container 那么它会在乎适当的间距，或者我应该说从容器的边界开始填充相等
look the difference between the code of this guy... actually he has added a lot of css to make it more attractive but i have deleted all the stuff just to explain you: 看看这个家伙的代码之间的区别...实际上，他添加了很多CSS以使其更具吸引力，但是我删除了所有内容只是为了向您解释：
code without text-align:justify; 没有text-align:justify; 代码 : ：
#container {
border: 2px dashed #444;
height: 125px;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3, .box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
}
code with text-align:justify; 带有text-align:justify; 代码 text-align:justify;
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3, .box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.