Question

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

我想要做的是让这些div框保持它们自己的静态宽度（300px，由文本上方图片的宽度决定），但为了参数的缘故，能够保持50px分隔内联和始终在中心（相隔50px）尽管我有它们的浏览器（1260或960px，或介于其中的某个地方）。我想这样做的原因是，如果我使用margin来分隔它们，它们只能在一个浏览器宽度中看起来“居中”（再次，它们之间的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

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

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

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

1 个答案: