css - 如何在液体布局中保持两个固定宽度的 div 等距

Question

我有一个流式布局页面，它设置了正文的最大宽度和最小宽度(分别为 1260 像素和 960 像素)。我有一个左侧边栏，它占据了屏幕左侧的 25%，内容占据了屏幕右侧的 75%。在内容中，我放置了两个带有固定宽度图片 (300px x 225px) 的 div 容器，每个容器下方都有一些文本。

我想做的是让那些 div 框保持它们自己的静态宽度(300px 由文本上方图片的宽度决定)但是为了争论的缘故，能够保持内联 50px 并且始终在中心(除了 50px 之外)不管我用什么浏览器(1260 或 960px，或介于两者之间)。我希望这样做的原因是，如果我使用边距将它们分开，它们只会在一个浏览器宽度中看起来“居中”(同样，将它们之间的 50px 隔开)并且在它们的布局中不是流动的。

JSFiddle:http://jsfiddle.net/fpN5t/1/

如果我没有很好地解释自己，请告诉我!

非常感谢您。

<div id="content">
    <div id="upper-left-box">
        <img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
        <p>Example text example text example text example text example text example text example text example text example text</p>
    </div>
    <div id="upper-right-box">
        <img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
        <p>Example text example text example text example text example text example text example text example text example text</p>
    </div>
     <h1 class="first-content-heading">Heading 1</h1>

    <p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
    <p>&nbsp;</p>
     <h2>Heading 2</h2>

    <p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
    <p>&nbsp;</p>
     <h3>Heading 3</h3>

    <p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
    <p>&nbsp;</p>
</div> 

#content {
    width: 75%;
    float: left;
    margin: 0;
    background: #FFF;
}
#upper-left-box {
    width: 300px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    float: left;
}
.boxed-content-image {
    width: 300px;
    height: 225px;
}
#upper-right-box {
    width:300px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    float: left;
}
.first-content-heading {
    clear: both;
}

Answer 1

你可以通过在它们周围放置一个带有 margin auto 的容器来使上面的框居中。然后你可以在框之间放置 50px 的边距以获得你正在寻找的效果"

http://jsfiddle.net/fpN5t/2/

<div class="upper-boxes">

    <div id="upper-left-box">
        <img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
        <p>Example text example text example text example text example text example text example text example text example text</p>
    </div>
    <div id="upper-right-box">
        <img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
        <p>Example text example text example text example text example text example text example text example text example text</p>
    </div>

</div> 


.upper-boxes{ width: 650px; margin: 0 auto; }

#upper-left-box {
    width: 300px;
    margin:0 50px 0 0;
    position: relative;
    text-align: center;
    float: left;
}
.boxed-content-image {
    width: 300px;
    height: 225px;
}
#upper-right-box {
    width:300px;
    position: relative;
    text-align: center;
    float: left;
}

希望我理解正确，如果不正确请指出。