Something like this?

Question

我有一个非常基本的页面，如下所示：的 JSFiddle - DEMO

目前，图片以包装“蓝色”为中心。 DIV。这个＆＃39;蓝色＆＃39; DIV以页面为中心，需要保持不变。

我想要的是能够让第一张图像与以蓝色突出显示的DIV左边缘对齐，然后能够将图像对齐到同一蓝色DIV的右边缘。< / p>

我在这里发现了一个使用此代码的帖子：

div.wrap {
    width: 600px;
    border: 1px solid #f00;
    height: 300px;
    position: relative;
}

.wrap img {
    border: 1px solid blue;
     position: absolute;
    bottom: 0;
}

.wrap img:nth-of-type(1) {
    left: 0;
}

.wrap img:nth-of-type(2) {
    right: 0;
}

但这似乎与主容器DIV排队，而不是蓝色DIV ..

我该如何正确地做到这一点？

谢谢：）

Answer 1

Something like this?

（或alternatively）

HTML

<body>
    <div id="holder">
        <div id="logo" class='left'>
            <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
        </div>
        <div class='right'>
            <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
        </div>
        <div style='clear:both;'></div>
        <div id="wrapper"></div>
    </div>
</body>

CSS

html, body {
    height: 100%;
    text-align:center;
    margin: 0px;
    padding: 0px;
    background: #fff;
    font-family:'Open Sans', sans-serif;
    font-size: 11pt;
    font-weight: 400;
    color: #fff;
}
#holder {
    margin :0 auto;
    display:inline-block;
    width: 850px;
}
.left {
    float:left;
}
.right {
    float:right;
}
#logo {
    align:middle;
    text-align:center
}
#wrapper {
    height:200px;
    position: relative;
    padding: 0em 0em 0em 0em;
    background: #fff;
    border: 1px solid blue;
}

对齐图像左和右正确使用CSS

1 个答案:

Something like this?