与自动宽度并排的DIV定位问题。

Question

我有2个DIV。 如下所示：

<div id="myForm" style="border: 1px solid black;width:500px;height:300px;margin-top: 10px;">
    <div class="leftcolumn">
        <div><input type="text" name="title" id="title" placeholder="Type title here" style="width:auto;" /></div>
        <div><textarea name="desc" id="desc" placeholder="Type description here" style="width:auto;"></textarea></div>
    </div>
    <div class="rightcolumn">
        <div>
         <label style="text-align: right;">Owner:</label>
         <input type="text" name="owner" id="owner" style="width: 100px;">
        </div>
        <div>
            <label style="text-align: right;">Estimate:</label>
            <input type="text" name="estimate" id="estimate" style="width: 100px;">
        </div>
    </div>
</div>

然后下面是我正在使用的css：

.leftcolumn { width: auto; border: 1px solid red; float: left}
.rightcolumn { width: 200px; border: 1px solid red; float: right}

下面是我面临的问题的屏幕截图：

Answer 1

将CSS更改为：

.leftcolumn { width: auto; border: 1px solid red; margin-right: 204px;}
.rightcolumn { width: 200px; border: 1px solid red; float: right}

并在html中替换左右：

<div id="myForm" style="border: 1px solid black;width:500px;height:300px;margin-top: 10px;">
    <div class="rightcolumn">
        <div>
            <label style="text-align: right;">Owner:</label>
            <input type="text" name="owner" id="owner" style="width: 100px;">
        </div>
        <div>
            <label style="text-align: right;">Estimate:</label>
            <input type="text" name="estimate" id="estimate" style="width: 100px;">
        </div>
    </div>
    <div class="leftcolumn">
        <div><input type="text" name="title" id="title" placeholder="Type title here" style="width:auto;" /></div>
        <div><textarea name="desc" id="desc" placeholder="Type description here" style="width:auto;"></textarea></div>
    </div>

</div>

查看资料

Answer 2

与其在左边的列中使用浮点数，不如将右边距设置为200px（如果需要一些间距则为210px）；

.leftcolumn { margin-right: 210px; border: 1px solid red}

这将使右列在边距内浮动。

您还需要反转html中div的顺序。 您希望右列位于左列之前。 不管“ myForm”的宽度如何，这都会为您提供所需的流畅布局。