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

Question

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

我想做的是让这些 div 框保持它们自己的静态宽度（300 像素，由文本上方图片的宽度决定），但为了论证的缘故，能够保持 50 像素内联并且始终不管我在哪个浏览器中（1260 或 960 像素，或介于两者之间），在中心（将 50 像素分开）。我想要这样做的原因是，如果我使用边距来分隔它们，它们只会在一个浏览器宽度中看起来“居中”（再次，在它们之间设置 50 像素），并且在它们的布局中不是流动的。

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

您可以通过在它们周围放置一个带有自动边距的容器来使上面的框居中。然后，您可以在框之间放置 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;
}

希望我能正确理解问题，如果没有请指出。