最小化后如何使页面布局保持不变？

Question

如何使我的页面布局保持不变，并且在最小化时不会变得一团簇？

但是当最小化时，页面布局变成

。 我想知道如何解决这个问题？ 我对HTML和CSS还是很陌生，所以我很难弄清楚这一点。

抱歉，如果编码有点混乱，这是我第一次做html和CSS！ 感谢所有我能得到的帮助。 我也在用Google Apps脚本执行此操作。

Answer 1

不要在您的body元素上设置width: 100%并使用百分比值，而不是使用硬编码的px值（例如margin-left: 310px ）。 所以，与其margin-left: 310px的margin-left屏幕的四分之一，可以使用margin-left: 25%

Answer 2

新增width: 1000px; 到您的容器。 然后，布局应保持一致。

Answer 3

像这样吗 https://jsfiddle.net/9nguoepu/7/我刚刚添加了一些div，用于包装标签，表单输入和一些CSS。

    <style type="text/css"> * {
    margin: 0
}
.container {
    margin-left: auto;
    margin-right: auto
}
.header {
    background-color: #8000FF;
    margin:auto;
    width: 50%;
    border:3px solid #41087B;
    padding: 10px;
}
.header img {
    float:left;
    padding: 5px;
}
.header h1 {
    color: white;
    line-height: 80px;
    text-align:center
}
.label {
   float: left;
    padding: 5px;
    color: red;
}
.label-container {
width: 50%;
    float:left;
}
.label p {
    padding: 2px
}
.inputBox {
    float:left;
}
.inputBox p {
    padding: 1px
}
.label2 {

    float:left;
    padding:5px;
    color: red
}
.label2 p {
    padding:2px
}
.inputBox2 {
    float:left;
}
.inputBox2 p {
    padding: 1px
}
.contentBackground {
    background-color:#D8D8D8;
    clear:left;
    width: 60%;
    margin: auto;
    height: 200px
         display: block;
}
.uploadFile p {
    text-align:center;
    padding: 20px;
    color:red
}
.content p {
    color:red;
    padding: 7px
}
.dropDown p {
    padding: 40px;
    margin-left: 8px;
    height:
}
.moreFiles {
    text-align:center
}
.textBox {
    text-align: center
}
.textBox p {
    text-align:center;
    padding: 5px
}
.button {
    text-align: center
}
</style>

Answer 4

设置最小宽度可以防止压扁元素。 https://jsfiddle.net/9nguoepu/9/

的HTML

<div class="customer-info-container">
            <div class="label">

                <p><b>Customer Name</b>
                </p>
                <p><b>Due Date</b>
                </p>
                <p><b>Phone #</b>
                </p>
            </div>
            <div class="inputBox">

                <p>
                    <input type="text">
                </p>
                <p>
                    <input type="text">
                </p>
                <p>
                    <input type="text">
                </p>

            </div>
            <div class="label2">

                <p><b>Contact</b>
                </p>
                <p><b>E-mail</b>
                </p>
                <p><b>PO#</b>
                </p>
            </div>
            <div class="inputBox2">

                <p>
                    <input type="text">
                </p>
                <p>
                    <input type="text">
                </p>
                <p>
                    <input type="text">
                </p>

            </div>
        </div>

的CSS

 .customer-info-container{
        width: 800px;
        min-width: 800px;
    }

.customer-info-container{
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .customer-info-container div  {
        display: inline-block;
    }
 .contentBackground {
    background-color:#D8D8D8;
    clear:left;
    min-width:800px;
    width: 60%;

    margin: auto;
    height: 200px
}

Answer 5

问题是您要混合百分比和像素单位。 在这里，我将标签/输入全部更新为百分比。 https://jsfiddle.net/9nguoepu/8/

但是，请注意，它们仍然“压缩”。 如果无论用户的视口大小如何，它们都应保持相同min-width ，请在CSS的body标签上设置min-width 。 如果用户的视口太窄（例如，在移动设备上），则在这种情况下，用户将具有水平滚动条。

我还建议像在js小提琴中所做的那样，使表单更具语义-使用<label>并将其保留在要标记的输入旁边/附近。 为了完全可访问，您应该添加带有input的id的for属性。 例如：

<label for="customer-phone-num">Phone Number</label>
<input type="text" id="customer-phone-num" />

请注意，这是一个ID，因此每页必须唯一。

您还应该注意将样式与语义分开。 例如，如果您正在阅读源代码， <b>标记就没有任何意义，但是在视觉上，它意味着它应该为粗体。 这些样式规范应在CSS中处理。 阅读此问答以获取更多详细信息： https : //softwareengineering.stackexchange.com/questions/255366/why-are-the-b-and-i-tags-deprecated

Answer 6

正如其他人提到的，您可以通过给容器指定宽度来强制所有内容保持不变。 例如，您可以定义主体的宽度：

body {
    width: 1000px;
}

大多数现代网站都是在考虑响应式Web设计的情况下创建的，这意味着页面上的元素将根据窗口大小而变化。 这样一来，同一网页就可以正确显示在所有设备上，包括小型移动屏幕。

Bootstrap是用于创建响应式网页的最常见框架之一。 您可能对阅读本教程感兴趣： http : //www.revillweb.com/tutorials/bootstrap-tutorial/ 。