如何在液體佈局中保持兩個固定寬度div等距

Question

我有一個液體佈局頁面，它具有正文集的最大和最小寬度（分別爲1260像素和960像素）。我有一個左邊的邊欄，佔據了左邊的25％，內容佔據了屏幕的右邊75％。在內容中，我放置了兩個帶有固定寬度圖片的div容器（300px x 225px），每個容器下面都有一些文字。

我想要做的是讓這些div盒保持它們自己的靜態寬度（由文本上方圖片的寬度決定的300px），但爲了參數的緣故，可以保留50px inline和總是在中心（除了50px之外），儘管我有他們的瀏覽器（無論是1260或960像素，或其中的某處）。我想這樣做的原因是，如果我使用邊距來分隔它們，它們只能在一個瀏覽器寬度中看起來'居中'（再次，禁止它們之間的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

您可以通過將容器周圍有寬餘，汽車中心的上框。然後，你可以放置一個50像素的保證金在盒子之間爲你尋找」

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

希望我正確地理解問題的影響，如果不請註明。