Question

如何在流体宽度父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>

Answer 1

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

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

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

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

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

内联div之间的自动间距

1 个答案: