0

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

我想做的是让这些 div 框保持它们自己的静态宽度（300px，由文本上方图片的宽度决定），但为了论证的缘故，能够保持 50px 内联并始终位于中心（将 50 像素分开）不管我在什么浏览器中（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;
}
4

1 回答 1

0

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

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

于 2013-03-18T15:51:13.743 回答