Question

我想创建一个html页面，其中div占用一定的百分比（宽度和高度），并且当我调整窗口大小时其里面的元素不会调整大小，这可能吗？

示例：

/* CSS */

#left-content-area {
    position: fixed,
    width: 19%,
    height: 60%,
    left: 27%,
    top: 20%
}

<!-- Html -->

<div id="left-content-area">
    First name: <input type="text" id=first_name_id" style="width=90%">
    Last name: <input type="text" id=last_name_id" style="width=90%">
    Phone number: <input type="text" id=phone_number_id" style="width=90%">
    Address: <input type="text" id=address_id" style="width=90%">
    <!--
    And more....
    -->
</div>

我是否必须将其硬连线到像素，以防止输入字段重新调整大小？

Answer 1

不要给予元素百分比。

您可以使用pixel，em，rem。

如果你想＆＃34;玩＆＃34;有点像给出一个最小值，然后用你仍然可以使用的百分比来缩放，例如宽度（百分比）和最小宽度（像素）

https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

另外，如果没有必要，我建议你不要使用内联样式。

只需为要查看的所有输入添加一个类

.class {
    width:90%;
    min-width:100px;
}

Answer 2

您必须使用px之类的非动态单位写入宽度，以确保调整父元素的大小不会影响子元素的宽度。

#left-content-area {
    position: fixed;
    width: 19%;
    height: 60%;
    left: 27%;
    top: 20%;
    min-width: 150px;
}
#left-content-area input{
    width:140px;
}

Answer 3

所以我相信我得到了它的工作。有一些错误。我在CSS中将逗号更改为分号，并在每种输入类型的样式标记中将您的=更改为：。

/* CSS */

#left-content-area {
    position: fixed;
    width: 19%;
    height: 60%;
    left: 27%;
    top: 20%
}

/* HTML */

<div id="left-content-area">
    First name: <input type="text" id=first_name_id" style="width: 90%">
    Last name: <input type="text" id=last_name_id" style="width: 90%">
    Phone number: <input type="text" id=phone_number_id" style="width: 90%">
    Address: <input type="text" id=address_id" style="width: 90%">
<!--
And more....
-->
</div>

让我知道这是否有效！感谢

Html布局 - 防止元素重新调整大小

3 个答案: