Question

我有一个标记，其中包含div和一些images，如图所示。目前div的每个部分都是垂直显示的。但是，我想在左边和左边显示项目。右边的文字，如屏幕转储中所示。

HTML标记：

     <div id="divgetpaidnow" style="float:none;width:200px;" class="paymentclass" paytype="GetPaidNow"  paytypeid="1">
  <asp:Image ID="Image1" src="images/getpaidnow.jpg" runat="server" class="paymentimg" />
   <div>
  </div>
 <asp:RadioButton ID="rdo1" Text="Get Paid Now" runat="server" class="myradio" GroupName="rdoPaymentgroup" />
 <div class="payTypeFooterText" style="float:none;">                                                   <strong>Get Paid Now:</strong><br />
   Instant Cash, visit one of our Mall Locations and get Paid Today
  </div>
 </div>
  <div id="divamazon" style="float: none;" class="paymentclass" paytype="Amazon" paytypeid="2">
     <asp:Image ID="Image2" src="images/amazon.jpg" runat="server" class="paymentimg" />
<div style="margin-top: 10px;">
       </div>
 <asp:RadioButton ID="rdo2" Text="Recommended" runat="server" class="myradio" GroupName="rdoPaymentgroup" />
      <div class="payTypeFooterText">
    <strong>Amazon Gift Card:</strong><br />
     Get paid quickly via electronic gift card and receive an extra 5%</div>
 </div>

的CSS：

.payTypeFooterText
        {
            width: 120px;
            font-style: normal;
            font-size: 10px;
        }

.myradio
        {
            color: grey;
            font-size: 12px;
            text-decoration: none;
        }

这两个css其他class名称仅用于使用JQUERY访问元素。 Screen Dump

帮助感谢！

Answer 1

您可以使用css属性 float 来对齐页面上的内容

<div>
    <div style='float:left;'>
        ----content---
    </div>
    <div style='float:right;'>
        ----content---
    </div>
</div>

Answer 2

为所有div设置一个公共类并使用display:inline-block

div{
  display:inline-block;
  background:red;
}

<强> DEMO

如何在asp.net中水平对齐Div？

2 个答案: