Question

Here is my attempt as producing my work in a Fiddle.

这是我的代码。

HTML

<div id="updatepanel">
    <div id="accountpanel">BLAH BLAH BLAH BLAH BLAH BLAH</div>
    <div id="billingpanel">
         <h2>Billing Info</h2>
        <fieldset>
            <label>Name:</label>            
            <label>Surname:</label>
            <label>Address:</label>
            <label>Phone:</label>
        </fieldset>
    </div>
    <div id="shippingpanel">
        <h2>Shipping Info</h2>
        <fieldset>
            <label>Name:</label>            
            <label>Surname:</label>
            <label>Address:</label>
            <label>Phone:</label>
        </fieldset>
    </div>
</div>

这是我的问题。我有一个购物网站，这是尝试重现结帐页面。我在CMS中使用购物模块，我的代码由CMS动态创建。我对此有限，但我可以修改CSS。

现在我想要的是Billing and Shipping面板并排排列，因此页面长度被削减，最终用户没有太多滚动要做。我尝试在包装器（updatepanel）上使用'float：left'，但这没有帮助。

Answer 1

请参阅Updated Fiddle here

CSS：

label{
    display:block;
}
#billingpanel{
    width:50%;
    float: left;    
}
#shippingpanel{
    width:50%;
    float: right;
}

Answer 2

<强> CSS

label{
    display:block;
}
#billingpanel{
    width:49%;
    float:left;    
}
#shippingpanel{
    width:49%;
    float:left;
}

Updated Fiddle

Answer 3

您必须浮动#shippingpanel和#billingpanel，而不是更新面板。但是，您应该确保之后清除浮动，方法是添加清除它们的:after伪元素：Updated Fiddle

#billingpanel{
    width:50%;
    float: left;    
}
#shippingpanel{
    width:50%;
    float: right;
}
#updatepanel:after {
    content: " ";
    display: table;
    clear: both;
    width: 0;
    height: 0;
}

Answer 4

更改css.One宽度应该比其他

少lil

label{
    display:block;
}
#billingpanel{
    width:50%;   
    float:left;
}
#shippingpanel{
    width:49.9%;
    float:left;
}

http://jsfiddle.net/WeTEp/13/

Answer 5

我喜欢设置内部最大宽度的内容来拉伸div并混淆布局;

label{
    display:block;
}
#billingpanel{
    width:50%;  
    maximum-width: 50%;
    float: left;
}
#shippingpanel{
    width:50%;
    maximum-width: 50%;
    float: left;
}

Answer 6

您也可以使用div表来执行此操作。jsfiddle。设计时更灵活。

<div id="updatepanel">
    <div id="billingpanel">
         <h2>Billing Info</h2>
        <fieldset>
            <label>Name:</label>            
            <label>Surname:</label>
            <label>Address:</label>
            <label>Phone:</label>
        </fieldset>
    </div>
    <div id="shippingpanel">
        <h2>Shipping Info</h2>
        <fieldset>
            <label>Name:</label>            
            <label>Surname:</label>
            <label>Address:</label>
            <label>Phone:</label>
        </fieldset>
    </div>
</div>

label{
    display:block;
}
#updatepanel{
    display:table;
    width: 100%;
}
#billingpanel{
    width:50%;    
    display:table-cell;"
}
#shippingpanel{
    width:50%;
    display:table-cell;"
}

定位div占据宽度的50％

6 个答案: