内联div之间的自动间距

时间:2011-08-13 10:42:29

标签: html spacing

如何在流体宽度父div中将div之间的间距设置为“auto”?只有CSS才有可能吗? 更加具体: 我有一些父div宽度width: 90%。我里面有3个内联元素。我希望第一个元素触摸我父div的左侧,第二个元素触及中间,最后一个元素触摸父div的右侧。

@edit: 我正在添加一些代码:

#news-pane {
    margin: 50px auto;
    width: 90%;
}

#news {
    color: #333;
    width: 300px;;
    vertical-align: top;
    display: inline-block;
}

#news img {
    max-width: 300px;
    height: auto;
}

HTML:

<ul id="news-pane">
    <li id="news">
        <div id="news-header">
           <h1>Title</h1><span>Date</span>
        </div>
        <p><News content</p>
    </li>
    <li id="news">
        <div id="news-header">
           <h1>Title</h1><span>Date</span>
        </div>
        <p><News content</p>
    </li>
    <li id="news">
        <div id="news-header">
           <h1>Title</h1><span>Date</span>
        </div>
        <p><News content</p>
    </li>
</ul>

1 个答案:

答案 0 :(得分:1)

您可以制作第一个元素float:left,第二个元素包含自动边距,第三个元素float:right。 AFAIK必须阻止元素才能工作。

演示:http://jsfiddle.net/2CmSK/


看到代码后编辑:主要问题是你对多个元素使用相同的id。您必须使用唯一ID或使用类。 HTML现在无效,并且可能在不同的浏览器中表现不可预测。

第二个问题是外部div的宽度以百分比给出,新闻项的宽度以像素为单位。如果用户的浏览器窗口宽度小于1000px,则外部div将小于900px宽,并且新闻项目将不适合内部。

在我正在阅读的各行之间,您正在使用某种封闭/标准工具来生成新闻项,因此您无法修改代码,并且它们都必须具有相同的结构。如果是这种情况那么不,如果它们在结构上不相同而不使用JavaScript,则不能使它们表现不同。