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>

SEE FIDDLE

Answer 2

为什么不将右边距设置为200px（如果你想要一些间距，则为210px），而不是使用左列的浮点数;

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

这将允许右栏在边距内浮动到位。

您还需要反转html中div的顺序。您希望右侧列在左侧之前。无论“myForm”的宽度如何，这都将为您提供所需的流畅布局。