网页无法正确调整大小

Question

我正在尝试创建一个具有两栏设计的商业网页。我试图在一侧有一个关于我们的部分，下面有一些项目符号。它在浏览器中的完整 window 视图中看起来不错，但是当我调整浏览器 window 大小时，我的文本变得杂乱无章并自行堆叠。我正在使用 div 和一个容器，以及 % 来放置东西，但我尝试过的任何东西都不起作用。有什么想法吗？

这是html:

<div class = "aboutuscontainer"> 
    <div class = "abouthead"><h2>About us:</h2></div>
    <div class = "aboutinfo"><p>Codes' Decoding is an independant web design company with the consumer's best interests in mind. Created in 2015, we strive to provide only the best in customer satisfaction and web reliability. Since our company is independant, we have the ability to interact directly with the client to offer them the most enjoyable experience possible.</p></div>
    <div class = "qualityhead"><h4>Quality:</h4></div> 
    <div class = "qualityinfo"><p>Here at Codes' Decoding we offer only the highest quality in website design. If you aren't happy, you don't pay. We guarantee you'll love your new site, or your money back!</p></div>
    <br> 
    <div class = "valuehead"><h4>Value:</h4></div> 
    <div class = "valueinfo"><p>When you work with Codes' Decoding you can be assured that you are receiving the best value on the market. Staying independant keeps us in control of our rates and allows us to keep them low for our valued customers.</p></div>  
    <br>  
    <div class = "servicehead"><h4>Service:</h4></div> 
    <div class = "serviceinfo"><p>Our team at Codes' Decoding is 100% dedicated to making sure your experience is perfect. We are there to answer any questions that you may have and our knowledgable team will ensure you have a smooth experience.</p></div>
</div>

这里是 css:

            .aboutuscontainer {
            position: relative;
            top: 55px;
            left: 0%;
            border-right: dotted yellow 1px;
            max-width: 51.5%;
            height: 100%;
        }

        .abouthead {
            position: absolute;
            color: yellow;
        }

        .aboutinfo {
            position: absolute;
            color: white;
            top: 90%;
            left: 0px;
            line-height: 1.5em;
        }

        .qualityhead {
            position: absolute;
            color: yellow;
            top: 370%;
            left: 2%;
        }

        .qualityinfo {
            position: absolute;
            color: white;
            top: 370%;
            left: 13%;
            line-height: 1.5em;  
        }

        .valuehead {
            position: absolute;
            color: yellow;
            top: 570%;
            left: 2%;
        }

        .valueinfo {
            position: absolute;
            color: white;
            top: 570%;
            left: 13%;
            line-height: 1.5em;  
        }

        .servicehead {
            position: absolute;
            color: yellow;
            top: 790%;
            left: 2%;
        }

        .serviceinfo {
            position: absolute;
            color: white;
            top: 790%;
            left: 13%;
            line-height: 1.5em;  
        }

Answer 1

有足够多的更改/建议，我认为值得为您创建一个 fiddle：https://jsfiddle.net/aaenyenq/

请注意代码的主要修改：

使用相对定位而不是绝对定位。
而不是左/上，让事情流动，并使用一些宽度。
使用 display: inline-block 或 float: left 等方法获得所需的左/右排列（我倾向于使用 display: inline-block）。
简化代码。消除不必要的 divs（例如围绕 h2 和 h4 元素），并使用容器 classes 和更通用的标记。
删除了 <br> 个标签。你永远不应该用它们来做间距。请改用边距/填充。

简化/修订HTML:

<div class = "aboutuscontainer"> 
    <h2>About us:</h2>
    <div class="aboutinfo"><p>Codes' Decoding is an independant web design company with the consumer's best interests in mind. Created in 2015, we strive to provide only the best in customer satisfaction and web reliability. Since our company is independant, we have the ability to interact directly with the client to offer them the most enjoyable experience possible.</p></div>
    <div class="listitem">
        <h4>Quality:</h4>
        <div><p>Here at Codes' Decoding we offer only the highest quality in website design. If you aren't happy, you don't pay. We guarantee you'll love your new site, or your money back!</p></div>
    </div>
    <div class="listitem">
        <h4>Value:</h4>
        <div><p>When you work with Codes' Decoding you can be assured that you are receiving the best value on the market. Staying independant keeps us in control of our rates and allows us to keep them low for our valued customers.</p></div> 
    </div>
    <div class="listitem">
        <h4>Service:</h4>
        <div><p>Our team at Codes' Decoding is 100% dedicated to making sure your experience is perfect. We are there to answer any questions that you may have and our knowledgable team will ensure you have a smooth experience.</p></div>
    </div>
</div>

简化CSS：

   .aboutuscontainer {
        position: relative;
        margin-top: 55px;
        left: 0%;
        border-right: dotted yellow 1px;
        max-width: 51.5%;
        height: 100%;
    }

    .aboutuscontainer h2 {
        color: yellow;
    }

    .aboutinfo {
        color: white;
        line-height: 1.5em;
    }

    .listitem h4 {
      display: inline-block;
      vertical-align: top;
      width: 20%;
      color: yellow;
    }

    .listitem div {
      display: inline-block;
      vertical-align: top;
      width: 78%;
      color: white;
    }

注意：如果您希望不同部分有不同的间距，您可以轻松地将 class 添加到 listitem div 元素，然后像这样处理不同的间距：

（假设你添加了一个class "service" - <div class="listitem service">）：

    .listitem.service h4 {
         width: 25%;
    }

    .listitem.service div {
         width: 73%;
    }

Answer 2

尽量不要使用绝对位置。我在这里为您修复了一些 css。我在左边使用浮动，在宽度上使用 %。

https://jsfiddle.net/gefp9bnd/

.qualityhead {
   color: yellow;
   width: 30%;
   float:left;
}

希望对您有所帮助。

网页无法正确调整大小

Webpage won't resize properly

html

css

position

overlapping