我在另一个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将是最好的解决方案。
答案 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-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>
答案 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>