Html 如何在div中均匀分布元素？_Html_Css

Html 如何在div中均匀分布元素？

html css

Html 如何在div中均匀分布元素？,html,css,Html,Css,我必须在另一个div中均匀流畅地放置几个元素，如下所示：我已经看到了使用text align:justify的技巧，如（）中所示，但是如果给定一个或两个元素，它将被放置（对齐）在右/左侧，如下所示：（这不是我想要的）任何帮助都将不胜感激。试试这个代码 <html> <head> <title>my page</title> <style type="text/css">

我必须在另一个div中均匀流畅地放置几个元素，如下所示：

我已经看到了使用text align:justify的技巧，如（）中所示，但是如果给定一个或两个元素，它将被放置（对齐）在右/左侧，如下所示：（这不是我想要的）

任何帮助都将不胜感激。

试试这个代码

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


我的页面
.new{宽度：500px；高度：200px；边框：1px实心#333；文本对齐：居中；显示：表格单元格；垂直对齐：中间；}
.new div{width:100px；height:100px；border:1px solid#300；display:inline block；}

您正在使用此

文本对齐：对齐错误。事实上，justify和display:inline之间存在差异。如果你查看被接受答案的人的代码，你会发现他使用了两种东西，即text align:justify
和display:inline
作为不同元素的属性，用于不同的目的
他使用文本对齐的位置：justify容器的属性，该属性告诉容器在其内容之间具有适当的间距，并且他已使用显示：inline作为所有框的属性，以使它们排列成一行
如果只使用display:inline
，则只在一行中显示它们，而不考虑适当的间距，但如果定义text align:justify然后itt将关注适当的间距，或者我应该说从容器边界开始的相等填充
看看这家伙的密码有什么不同。。。事实上，他添加了很多css以使其更具吸引力，但我删除了所有内容，只是为了向您解释：
无文本对齐：对齐：
#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;

}

与文本对齐：对齐
#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;

}

左对齐的内容如下所示（一个或多个点表示空白）：
（1）文本对齐：对齐
不对齐最后一行（或唯一一行）*。一个简单的解决方案是添加一个很长的单词，它只能放在自己的一行上：
+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

（2）您希望在第一个单词之前和最后一个单词之后使用空格。一个简单的解决方案是添加虚拟词，以产生以下结果：
+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

可以通过添加额外的标记来实现所需的结果。例如：

.row{
文本对齐：对齐；
}
.罗：之后{
显示：内联块；
内容：“；
宽度：100%；
}
.盒子{
显示：内联块；
}
.笨蛋{
显示：内联块；
}
/****用于测试****/
.行{
利润率：1米0；
背景#FC0；
}
.盒子{
背景：#F0C；
宽度：4em；
身高：5公分；
}
.box:第n个孩子（偶数）{
背景：0立方英尺；
宽度：8em；
}
这应该是您要找的。它要求您将行元素包装在一个“虚拟”div中，但这应该可以

.row{
显示：表格；
宽度：100%；
表布局：固定；
边缘底部：10px；
}
.元素包装器{
显示：表格单元格；
垂直对齐：顶部；
}
.元素{
宽度：80%；
高度：100px；
保证金：自动；
背景：#ccc；
}

托托
提提
塔塔
太特
托托
提提
塔塔
托托
提提
如果您不需要支持较旧的浏览器，那么不妨看看flexbox：从开始，是的，不要紧，它本身不会；能否在父元素上完成回答并指定所需的样式？即使如此，正如问题中所指出的，它也不一定是完美分布的。有了这个，我希望你现在能够理解你不能理解的东西……嘿，谢谢你的观点，但是试着用两个或一个元素。它将它们放在最右边/最左边，而不是我所期望的。我提到了边距b/w元素和（以及边距b/w边框和元素）应该是相同的。不幸的是，这不会均匀地分布元素。这些元素之间的间距必须相同。谢谢，它起作用了。请注意：在虚拟div之后有空格或换行符是很重要的（我花了几个小时才弄清楚）。
+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+