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

Question

How do I make my page layout stay the same and not become all clumped up when minimized?

but when minimized the page layout becomes

. I was wondering how I could fix this? I'm still new to HTML and CSS so I was having trouble with figuring this out.

Sorry if the coding is a bit messed up this is my first time doing html and css! Appreciate all of the help I can get. I'm also doing this with google apps script.

Answer 1

Rather than using hardcoded px values (such as margin-left: 310px ), set width: 100% on your body element and use percentage values. So, instead of margin-left: 310px for a margin-left of a quarter of the screen, you can use margin-left: 25% .

Answer 2

Add width: 1000px; to your container. Then the layout should stay consistent.

Answer 3

Something like this? https://jsfiddle.net/9nguoepu/7/ I just added some divs wrapping your labels and form inputs and a little 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

Setting minimum widths prevents elements from getting squished. 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

The issue is you're mixing percentage and pixel units. Here, I've updated the label/inputs to be all in percentages. https://jsfiddle.net/9nguoepu/8/

However, note that they still "squish". If they should remain the same width no matter the users' viewport size, set a min-width on your body tag in CSS. The user will have a horizontal scrollbar in this case, if their viewport is too narrow (like on a mobile device, for example).

I also would recommend making the forms more semantic, as I did in the js fiddle - using <label> and keeping them next to/near the input they're labelling. To be completely accessible, you should add a for attribute with the id of the input . For example:

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

Note that this is an id, so it has to be unique-per-page.

You should also be careful to separate styles from semantics. For example, the <b> tag doesn't mean anything if you're reading the source, but visually, it means it should be bold. Those kinds of stylistic specifications should be handled in the CSS. Read this Q&A for more details: https://softwareengineering.stackexchange.com/questions/255366/why-are-the-b-and-i-tags-deprecated

Answer 6

As mentioned by others, you can force everything to stay the same by giving the container a set width. For example, you could define a width to the body:

body {
    width: 1000px;
}

Most modern websites are created with Responsive Web Design in mind, meaning that elements on the page will shift around depending on the window size. This allows the same webpage to appear correctly on every device, including small mobile screens.

Bootstrap is one of the most common frameworks used to create responsive web pages. You might be interested in reading this tutorial: http://www.revillweb.com/tutorials/bootstrap-tutorial/ .