如何在div中均匀分配元素？ [英] How to distribute elements evenly inside a div?

问题描述

我必须按照以下步骤在几个div中均匀且流畅地放置一些元素：

我已经看到了使用text-align：justify的技巧，如（属性将来可能会使用

I have to place few elements evenly and fluidly inside another div as mocked below:

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

Any help would be greatly appreciated.

解决方案

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

这篇关于如何在div中均匀分配元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！