内联 div 之间的自动间距

Question

如何在流体宽度父 div 内将 div 之间的间距设置为“自动”？仅使用 CSS 是否可以实现？ 更具体： 我有一些父 div 宽度 width: 90%。我里面有 3 个内联元素。我希望第一个元素接触父 div 的左侧，第二个元素位于中间，最后一个元素接触父 div 的右侧。

@编辑： 我正在添加一些代码：

#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>

Answer 1

您可以将第一个元素设置为 float:left，第二个元素设置为自动边距，第三个元素设置为 float:right。 AFAIK 元素必须被阻止才能起作用。

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

---

看到代码后编辑：主要问题是你多个元素使用相同的 id。您必须使用唯一的 id 或使用类。 HTML 目前无效，并且在不同的浏览器中可能会出现不可预测的行为。

第二个问题是外部 div 的宽度以百分比给出，而新闻项的宽度以像素给出。如果用户的浏览器窗口宽度小于 1000 像素，则外部 div 宽度将小于 900 像素，并且新闻项将无法容纳在内部。

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