0

我有 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}

下面给出了我面临的问题的屏幕截图： 在此处输入图像描述

4

2 回答 2

3

将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>

见小提琴

于 2013-08-07T14:35:54.457 回答
0

与其对左列使用浮点数，不如将右边距设置为 200 像素（如果您想要一些间距，也可以设置为 210 像素）；

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

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

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

于 2013-08-07T14:47:34.390 回答