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

时间:2016-03-03 00:24:36

标签: html css css3 flexbox

我在另一个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: flexjustify-content: space-around css方法,但是它们将所有内部div放在一行中,因此它们的一部分位于屏幕之外。有没有办法实现我的目标?纯css将是最好的解决方案。

2 个答案:

答案 0 :(得分:0)

如果使用内联块元素,则可以使用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-aroundspace-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>

答案 1 :(得分:0)

是的,带

的例子
  

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>