Question

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

enter image description here

我在（https://stackoverflow.com/a/6880421/2159250）中看到了使用text-align：justify的技巧，但是给定一个或两个元素，它在右侧/左侧放置（对齐），如下所示:(其中不是我想要的。）

enter image description here

非常感谢任何帮助。

Answer 1

左对齐内容如下所示（一个或多个点代表空白）：

+----------------------------------------------+
|word.word.word.word                           |
+----------------------------------------------+

（1） text-align: justify无法证明最后一行（或唯一）行*。一个简单的解决方案是添加一个非常长的字，它只能放在自己的一行上：

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

（2）您需要在第一个词之前和最后一个词之后的空格。一个简单的解决方案是添加虚拟字以产生以下结果：

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

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

.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属性可以在将来使用

Answer 2

这应该是你要找的。它要求你将行元素包装在“虚拟”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>

Answer 3

DEMO

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;

}

Answer 4

试试此代码

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

Answer 5

你错了这个text-align:justify;。实际上，对齐和display: inline;之间存在差异。如果你看一下接受答案的人的代码，那么你会发现他已经使用了text-align: justify和display: inline作为不同元素和不同目的的属性。

他使用容器的text-align:justify;属性的地方告诉容器在其内容之间有适当的间距，他使用display:inline;作为所有框的属性来命令它们排成一行

如果你只使用display:inline那么它只会在一行中显示它们而不关心正确的间距但是如果你定义text-align:justify;那么它将关心适当的间距或我应该说相等从容器边框填充

看看这个家伙的代码之间的区别......实际上他已经添加了很多css以使其更具吸引力，但我删除了所有的东西只是为了解释你：

code没有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 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;

}

如何在div内均匀分配元素？

5 个答案: