我试图在 div 空间中很好地制作所有子元素。我已经使用内联 block 元素和 float 元素设置了 css。子元素的大小是固定的。
HTML
<div class="content">
<h2>Inline-block</h2>
<a href="#" class="i-b-item">I-B Item 1</a>
<a href="#" class="i-b-item">I-B Item 2</a>
<a href="#" class="i-b-item">I-B Item 3</a>
<a href="#" class="i-b-item">I-B Item 4</a>
<a href="#" class="i-b-item">I-B Item 5</a>
<a href="#" class="i-b-item">I-B Item 6</a>
<a href="#" class="i-b-item">I-B Item 7</a>
<a href="#" class="i-b-item">I-B Item 8</a>
<h2>Floated</h2>
<a href="#" class="f-item">Float Item 1</a>
<a href="#" class="f-item">Float Item 2</a>
<a href="#" class="f-item">Float Item 3</a>
<a href="#" class="f-item">Float Item 4</a>
<a href="#" class="f-item">Float Item 5</a>
<a href="#" class="f-item">Float Item 6</a>
<a href="#" class="f-item">Float Item 7</a>
<a href="#" class="f-item">Float Item 8</a>
<div style="clear:both"></div>
</div>
CSS
.content {
background: grey;
}
.content a{
padding: .5em;
margin: .5em;
height: 75px;
width: 150px;
background: white;
}
.i-b-item{
display: inline-block;
}
.f-item{
float: left;
display: block;
}
基本上当窗口大小发生变化时,我希望子元素的边距能够让它们填满剩余的空间。因此,我不想让剩余空间位于右侧,而是希望子元素的边距扩展到所有子元素的间距均匀,同时仍保持左对齐。
我不想用 Javascript 做任何计算,我希望有一个纯 css 解决方案,但似乎无法让任何东西正常工作。
最佳答案
对子元素设置为display:inline-block
的父元素使用text-align:justify
。
在您的情况下,.content
类可以拥有它。并且您的空间将平均分配,而元素可以保持固定大小(宽度)。
.content {
text-align:justify;
}
希望这对您有所帮助。
关于html - float 或内联 block 元素的自动边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13109238/