0

問題

2 番目DIVは、両方の幅が の場合の折り返しですが、一方の50%幅を にすると、2 列としてレイアウトされます。これは予想される動作ですか、それとも何か間違っていますか?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 を含める必要があります。おすすめは<!DOCTYPE html>. IE6 を含むすべてのブラウザで動作します。

また、可能なボックスモデルに注意する必要があります。

この例box-sizingのように、div にプロパティを設定してみることができます。また、インライン要素では認識されないため、display-type を に設定してください。display:inline-blockwidth

box-sizing:border-box最初の 2 つの divは、境界線とパディングの両方が50%幅に含まれているという宣言があるため、1 行に収まります。

2 番目の 2 つの div は、標準の w3c-box モデルを持っているため壊れています。幅は50%コンテンツのみを考慮し、パディングとボーダーが幅に追加されるため、100%合計幅を超えます。

これで問題が解決すると確信しています。この場合、コードの他の場所に css があり、div を変更して (ボーダー/パディングを追加して) 折り返すようにします。

于 2012-11-08T14:50:23.653 に答える