在父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的{​​{1}}属性：

left

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

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