與自動寬度並排的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”的寬度如何，這都會為您提供所需的流暢布局。