Css 如何保持两个固定宽度div'；s在液体布局中是等间距的

我有一个液体布局页面，其中包含主体集的最大宽度和最小宽度（分别为1260px和960px）。我有一个左侧边栏，占据了屏幕左侧的25%，而内容占据了屏幕右侧的75%。在内容中，我放置了两个div容器，其中包含固定宽度的图片（300px 225px），每个容器下面都有一些文本

我想做的是让这些div框保持它们自己的静态宽度（300px，由文本上方图片的宽度决定），但是为了便于讨论，能够保持50px的内联间隔，并且始终位于中间（除了50px之外），不管我在哪个浏览器中（1260或960px，或者介于两者之间的某个位置）。我喜欢这样做的原因是，如果我使用margin来分隔它们，它们在一个浏览器宽度中看起来只是“居中”（同样，在它们之间加上50px），并且在布局中不是流动的

JSFiddle：

如果我解释得不好，请告诉我

事先非常感谢你

<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> 

---

您可以使用“自动边距”在上部框周围放置一个容器，使其居中。然后，您可以在框之间放置一个50像素的边距，以获得您想要的效果”

示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本

示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本

.上框{宽度：650px；边距：0自动；}
#左上框{
宽度：300px；
利润率：0.50px 0.0；
位置：相对位置；
文本对齐：居中；
浮动：左；
}
.盒装内容图像{
宽度：300px；
身高：225px；
}
#右上框{
宽度：300px；
位置：相对位置；
文本对齐：居中；
浮动：左；
}

---

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

太好了，谢谢你！你知道，我以前确实试过把它放在一个盒子里，但是我有一个百分比的宽度，所以我不能工作？我能问一下为什么会这样吗？以防万一你想要加分答案！非常感谢你。百分比很挑剔。如果你在容器内的div上保留边框、填充和边距这将对所述容器的总宽度产生影响。您需要提前计算主容器侧面的边框、填充和边距所占的百分比宽度，并对主容器内的div宽度进行调整。这不是不可能的，just需要一点数学知识。

#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;
}

<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;
}