html - 在父 DIV 中将两个 div 并排放置

Question

我在另外两个父 DIV 中有两个 DIV。我要做的是将“时钟”DIV 对齐到“面板”DIV 的左侧，将“sd”DIV 对齐到“面板”DIV 的中心。

现在显示的内容：

我想要做什么：

我的 HTML 看起来像：

<div id="weather">
    <div id="panel">
        <div class="clocks">
        </div>
        <div id="sd">
            <script type="text/javascript" src="http://www.weathers.com"></script>
        </div>
    </div>
    <p class="slide"><a href="#" class="btn-slide">Weather</a></p>
</div>

我的 CSS 看起来像：

#weather {
    margin: 0 auto;
    padding: 0;
    width: 990px;
    font: 75%/120% Arial, Helvetica, sans-serif;
    top: 0;
    position: absolute;
    z-index: 999999999;
    left: 0%;
    margin-left: 0px;
}
#panel {
    background: url('weatherBack.png') no-repeat;
    height: 195px;
    width: 990px;
    display: none;
    text-align: center;
    margin: 0 auto;
    line-height: 195px;
}
#sd {
    margin: 0 auto;
    padding: 0;
    width: 175px;
}
.slide {
    margin: 0;
    padding: 0;
    border-top: solid 4px #422410;
    background: url(btn.png) no-repeat center top;
}
.btn-slide {
    background: url(white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}
.learn {
    z-index: 9999999999999;
    position: absolute;
    top: 85px;
    right: 3px;
}
.box-cnt {
    padding: 10px;
    padding-bottom: 2px;
    background-color: #1FAAEB;
    zoom: 1;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

.clocks {
    width: 209px;
    height: 131px;
    position: relative;
    top: 0;
    left: 151;
    background: url('css/images/clockbg.png') no-repeat 0 0;
}

Answer 1

在时钟和天气面板上尝试float值为 的属性：left

.clocks {
    width: 209px;
    height: 131px;
    position: relative;
    float: left;
    background: url('css/images/clockbg.png') no-repeat 0 0;
}

#sd {
    margin: 0 auto;
    padding: 0;
    width: 175px;
    position: relative;
    float: left;
}

这是一个有效的 JSFiddle 链接：http: //jsfiddle.net/cYFfT/

如果您想在它们之间留出更多空间，只需在 SD 面板上设置左边距，如本次更新：http: //jsfiddle.net/cYFfT/1/