Question

我无法将两个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应为绿色背景矩形，但它的上边缘是标题图像的下边缘。

Answer 1

你可以浮动第一个div左边，并假设有足够的宽度来保持两者，它们应该在顶部对齐。

http://jsfiddle.net/Z93dM/

Answer 2

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

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

在www.w3schools.com

了解详情

Answer 3

没有什么可以做的。您可以在 .hdrimg 上将 float 的css属性定义为 left ，如下所示：

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

它将按预期运行。但请记住，div必须有足够的宽度空间才能适合它。

Answer 4

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

不能让div对齐

4 个答案: