Html 内联div之间的自动间距

如何在流体宽度父div内将div之间的间距设置为“自动”？甚至只使用CSS也可以吗？ 更具体地说： 我有一些父div width

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:

标题
您可以使第一个元素
浮动：左
，第二个元素具有自动边距，第三个元素
浮动：右
。好的，这些元素必须被阻塞才能工作

演示：


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

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

在我读到的字里行间，你正在使用某种封闭的/标准的工具来生成新闻条目，因此你不能修改代码，它们都必须具有相同的结构。如果是这种情况，那么不，如果它们在结构上相同而不使用JavaScript，则不能让它们有不同的行为。
更具体地说，它们被设置为内联块。这些是带有图片、标题、日期和一些文字的新闻。如果我设置
inline
则会发生奇怪的事情-我的div（宽度设置为300px）尝试填充整个父div并采用父div的宽度…是的，我已经在我的问题中添加了代码。谢谢你的回答。有没有一种方法可以实现我想要的，而不可能瞄准特定的新闻部门？那么，我是否可以为每个div设置一些规则并使其生效？如果我理解正确，您可以使用类来针对多个div。您需要显示添加到主要问题中的.HTML。添加“first”、“second”和“last”之类的类不是解决方案是的，这段代码由WordPress打印。我当然有一些改变输出的能力，但我认为JavaScript将更容易实现，我将继续使用它。谢谢你的帮助。
<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>