Question

我正在尝试使用两列设计创建一个商业网页。我试图在一侧有一个关于我们的部分，下面有一些子弹。在完整的窗口视图中它在浏览器中看起来很不错，但是当我调整浏览器窗口的大小时，我的文本会变得混乱并堆叠在自身上。我正在使用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

有足够的变化/建议，我认为值得为你创造一个小提琴：https://jsfiddle.net/aaenyenq/

请注意代码的主要修订：

而不是绝对，使用相对定位。
而不是左/上，允许事物流动，并使用一些宽度。
使用display：inline-block或float：left（我倾向于显示：inline-block）等方法获得所需的左/右排列。
简化代码。消除不必要的div（例如@implNote和h2元素周围），并使用容器类和更通用的标记。
删除了h4个代码。你永远不应该将它们用于间距。改为使用边距/填充。

简化/修改HTML：

<br>

简化CSS：

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

注意：如果你想为不同的部分设置不同的间距，你可以很容易地将一个类添加到.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; } div元素，然后像这样解决不同的间距：

（假设您添加了一个班级＆＃34;服务＆＃34; - listitem）：

<div class="listitem service">

Answer 2

尽量不要使用绝对位置。我在这里为你修好了一些css。我使用左侧浮动，宽度上使用％。

https://jsfiddle.net/gefp9bnd/

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

希望有所帮助。

网页无法正常调整大小

2 个答案: