浮动或内联块元素的自动边距

时间:2012-10-28 13:38:21

标签: html css

我正在尝试很好地制作div空间中的所有子元素。我使用内联块元素和浮动元素设置了css。子元素是固定大小。

jsFiddle

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解决方案,但似乎无法正常工作。

1 个答案:

答案 0 :(得分:0)

text-align:justify用于父元素,其中子元素设置为display:inline-block

在您的情况下,.content类可以拥有它。并且您的空间将平均分配,而元素可以保持固定大小(宽度)。

.content {
    text-align:justify;
}

希望这有帮助。