0

问题

DIV如果两个宽度都是，则第二个是换行50%，但是如果我将其中一个宽度设为，DIVs 49%它将布局为两列。这是预期的行为还是我做错了什么？

CSS

.box
{
    display: block;
    width: 100%;
    padding: 0;
}

.box.twocolumn .column1
{
    display: inline;
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
}

.box.twocolumn .column2
{
    display: inline;
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
}

HTML

<div class="box">
    <div class="box twocolumn">
        <div class="column1">
            <label>
                Start Date:</label>
            <asp:TextBox ID="StartDate" CssClass="datepicker" runat="server"></asp:TextBox>
        </div>
        <div class="column2">
            <label>
                End Date:</label>
            <asp:TextBox ID="EndDate" CssClass="datepicker" runat="server"></asp:TextBox>
        </div>
    </div>
</div>
4

1 回答 1

3

你的问题很模糊，但我试着给出一个可能解决你问题的答案：

首先，您应该始终包含正确的文档类型，以使所有浏览器的行为方式相同。推荐的一个是<!DOCTYPE html>。它适用于所有浏览器，甚至 IE6。

您还必须注意可能的box-models。

Now you can try out to set the box-sizing property on your divs like in this example. Also, set the display-type to display:inline-block, because width is not recognized on inline elements!

The first two divs fit on one line, because the have the box-sizing:border-box declaration - both the border and the padding are included into the 50% width.

The second two divs break because they have standard w3c-box modell. The 50% width only account for the content, padding and border are added to the width, thus exceeding 100% total width.

I'm pretty sure this could fix your problem. If this is the case you have some css elsewhere in your code, which modifies your divs (adding border/padding) to make them wrap.

于 2012-11-08T14:50:23.653 回答