0

2つのdivを水平に揃えるのに問題があります

これが私のaspxマスターページのhtmlです。

           <div class="hdrimg">
           </div>
           <div class="rightofhdrimg">
                <asp:ContentPlaceHolder ID="HeaderRight" runat="server">  </asp:ContentPlaceHolder>
           </div>

これがCSSです（私はCSS3を使用しています）。

.hdrimg
{
width: 680px;
margin-left: 8px;
height: 130px;
background-color: White;
background-image: url('Images/Banner/WebsiteHeader8.13.2012.jpg');
background-repeat: no-repeat;
background-size: 100%;
-moz-border-radius-bottomleft: 1em;
-webkit-border-bottom-left-radius: 1em;
border-bottom-left-radius: 1em;
 -moz-border-radius-bottomright: 1em;
-webkit-border-bottom-right-radius: 1em;
border-bottom-right-radius: 1em;

}

.rightofhdrimg
{
float: right;
display: inline-block;
background-color: #008000 ;
height: 190px;
width:240px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;

}

ヘッダー画像の右側のdivは緑色の背景の長方形である必要がありますが、その上端はヘッダー画像の下端です。

4

4 に答える 4

1

最初の div を左にフロートさせることができ、両方を保持するのに十分な幅があると仮定すると、上部に配置する必要があります。

http://jsfiddle.net/Z93dM/

于 2012-08-18T17:36:25.007 に答える
0 
<div>
   <div class="hdrimg" style="float: left;">
      <asp:ContentPlaceHolder ID="HeaderRight" runat="server">         
    </div>
    <div class="rightofhdrimg">
    </div>
</div>
于 2012-08-18T18:08:42.353 に答える
0

divに追加できposition: absolute;ます。これにより、ブラウザー ウィンドウに対して相対的な位置を固定することができます。

.myDiv{
position: absolute;
top: 30px;
}

詳細については、www.w3schools.comをご覧ください。

于 2012-08-18T17:32:49.110 に答える
0

これほど多くのことはありません。以下のように、 floatの css プロパティを.hdrigの左に定義できます。

.hdrimg {
  //existing stuff
  float:left;
}

期待どおりに動作します。ただし、両方の div が収まるように十分な幅のスペースが必要であることに注意してください。

于 2012-08-18T17:40:55.897 に答える