内联 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，你就不能让它们表现不同。