Question

我在另一个div中有多个div

<div class="container">
  <div id="div1">text1</div>
  <div id="div2">text2</div>
  <div id="div3">another text</div>
  ...
  <div id="divN">text N</div>
</div>

每个内部div都没有设置width属性，但它有display: inline-block所以每个div都适合其内容（文本）。如果我像这样留下他们内部divs水平填充浏览器，直到他们遇到行尾，他们从左侧开始。这对我来说很好。但不幸的是，div的每个“线”都与右侧的距离不同。我想为他们辩护，就像我可以为文本辩护一样。我尝试了display: flex和justify-content: space-around css方法，但是它们将所有内部div放在一行中，因此它们的一部分位于屏幕之外。有没有办法实现我的目标？纯css将是最好的解决方案。

Answer 1

如果使用内联块元素，则可以使用text-align：

设置它们的对齐方式

此属性描述块的内联级内容的方式如果内容未完全填充，则沿着内联轴对齐线盒。

注意最后一行的行为有所不同，如果你也想证明它的合理性，你也应该使用text-align-last：

此属性描述块的最后一行或行的右边在'text-align'为'justify'时对齐强制换行符之前。

text-align: justify;
text-align-last: justify;

.container {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  border: 1px solid;
  width: 500px;
}
.item {
  width: 100px;
  border: 1px solid blue;
  display: inline-block;
}

<div class="container">
  <div class="item">text1</div>
  <div class="item">text2</div>
  <div class="item">text3</div>
  <div class="item">text4</div>
  <div class="item">text5</div>
  <div class="item">text6</div>
</div>

如果您使用flexbox，则不再适用。不过，您可以将justify-content设置为space-around或space-between以证明其合理性。

justify-content属性沿着主轴对齐flex项 flex容器的当前行。

请注意，默认情况下，Flexbox容器为single-line。如果您想要multi-line，请使用flex-wrap属性：

flex-wrap属性控制是否为flex容器单行或多行

justify-content: space-around;
flex-wrap: wrap;

.container {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  border: 1px solid;
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  border: 1px solid blue;
}

<div class="container">
  <div class="item">text1</div>
  <div class="item">text2</div>
  <div class="item">text3</div>
  <div class="item">text4</div>
  <div class="item">text5</div>
  <div class="item">text6</div>
</div>

Answer 2

是的，带

的例子

text-align＆amp;内联块

证明 - 内容＆amp; flex，wrap

/* inline-block (childs ) */
.container {
  display:inline-block;
  text-align:justify;
  vertical-align:top;
  background:tomato;
  font-size:0;/*for last pseudo line to use no space optionnal */
}
.container:after, body:after {
  content:'';
  display:inline-block;
  width:100%;
  vertical-align:top;/* remove gap underneath*/
}
/* flex (parent */
.container2 {
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:space-between;
  background:turquoise;
}
/* both */
body>div {
  width:200px;
  padding:3px;
  border:solid;
}
div div {
  font-size:1rem;/* if font-size parent was set to 0 */
  display:inline-block;
  background:rgba(0,0,0,0.2)/* lets see them a bit*/;
}
div div:first-child {/* or any elements that needs to span a line */
  color:white;
  font-weight:bold;
  background:none;
  width:100%;/* 100% = full line */
  text-align:center;
  }
/* snippet */
body {
  margin:50px;
  text-align:justify;
  }
kbd {
  color:brown
    }

<div class="container">
  <div  >INLINE-BLOCK <kbd>IE8</kbd></div>
  <div  >text1</div>
  <div  >text2</div>
  <div  >another text</div>
  <div  >text N</div>
  <div  >text1</div>
  <div  >text2</div>
  <div >another text</div>
  <div  >another text</div>
  <div  >text N</div>
  <div >text N</div>
  <div  >text1</div>
  <div  >text2</div>
  <div  >another text</div>
  <div  >text N</div>
  <div  >another text</div>
  <div  >text N</div>
  <div  >text1</div>
</div>
<div class="container2">
  <div  >INLINE-FLEX <kbd>IE11</kbd></div>
  <div  >text1</div>
  <div  >text2</div>
  <div  >another text</div>
  <div  >text N</div>
  <div  >text1</div>
  <div  >text2</div>
  <div >another text</div>
  <div  >another text</div>
  <div  >text N</div>
  <div >text N</div>
  <div  >text1</div>
  <div  >text2</div>
  <div  >another text</div>
  <div  >text N</div>
  <div  >another text</div>
  <div  >text N</div>
  <div  >text1</div>
</div>

是否有可能让div中的所有元素都合理，即使它们大于div？

2 个答案: