0

我无法让两个 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

您可以添加position: absolute;到您的 div 中。这将允许将它们的位置设置在相对于浏览器窗口的固定位置。

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

在www.w3schools.com上了解更多信息

于 2012-08-18T17:32:49.110 回答
0

没有什么比这更重要的了。您可以在.hdrimg上定义float的css 属性，如下所示：

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

它将按预期运行。但请记住，两个 div 都必须有足够的宽度空间，以便它们可以适应。

于 2012-08-18T17:40:55.897 回答
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 回答