Question

所以，我正在使用XHTML和CSS进行学校作业。

我在很多地方使用了float css属性作为页面的主要布局。在重新调整浏览器大小时，只有部分项目可以正确调整大小。

我已经引用了W3Schools.com几个小时和几小时，并且从那里弄乱了各种编码样本，没有运气来解决我的问题。

我的标题位于顶部（有一个容器[header]，然后是[leftHeader和rightHeader]内的两个单独的div）。正确的标题似乎没有正确调整大小（即使在JSFiddle示例中，您甚至无法看到它）。

另一个问题是，主容器由[main]作为容器div来保存所有主要内容，然后是[photograph]和[summary]中的另外两个项目。 [照片]和[摘要]不会在[主要]内重新调整大小，[摘要]与页脚重叠。

[footer]和[navbar]似乎从我能说的方面重新调整大小。

任何帮助，为什么会发生这种情况，我做错了什么，以及可能的解决方案将不胜感激！

            <title>Assignment #1</title>
        </head>
        <body>
            <div>
    <div id="header">
<div id="leftHeader">
    <p class="header">
        Class (Semester 2016)<br/>
        Professor Name Here<br/>
        George Mason University
    </p>
</div>
<div id="rightHeader">
    <p class="header">
        Name Here<br/>
        <a href="mailto:kzuiker3@gmu.edu">email@gmu.edu</a><br/>
        <strong>Last Modified: </strong><em>Time Date Zone</em>
    </p>
</div>
</div>
            <div id="navBar">
        <strong>Assignments</strong>
        <ul>
            <li><a href="Assignment1/">Assignment 1</a></li>
            <li><a href="Assignment2/">Assignment 2</a></li>
            <li><a href="Assignment3/">Assignment 3</a></li>
            <li><a href="Assignment4/">Assignment 4</a></li>
        </ul>
        <br/>
        <strong>Lab Practica</strong>
        <ul>
            <li><a href="Practicum1">Practicum 1</a></li>
            <li><a href="Practicum2">Practicum 2</a></li>
        </ul>
    </div>
    <div id="footer">
    <p class="footer">
        This web site is entirely orginal work therefore full academic copyright is retained. This web site complies with the <a href="honor_code_website">Mason Honor Code</a>.</p>
    </div>
        <div id="main">
            <div>
                <div id="photograph">
                    <img src="Personal_Picture.jpg" alt="Picture" style="width:300px;height:240px;" />
                </div>
                <div id="summary">
                <p class="summaryText">
                    <strong>Summary</strong></p>
                    <ul>
                        <li><strong>Personal</strong>
                            <ul>
                                <li>Hobby</li>
                                <li>Hobby</li>
                                <li>Hobby</li>
                            </ul>
                        </li>
                        <li><strong>Academic</strong>
                            <ul>
                                <li>Information Technology major</li>
                                <li>3.92 GPA</li>
                                <li>Senior standing</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <p class="mainText" style="text-align: right;padding:3px 50px 0px 50px;"><strong>Professional &amp; Personal Details</strong></p>
            <p style="padding:0px 50px 5px 400px;">
                Personal information here
            </p>
        </div>
    </div>
</body>
</html>`

Answer 1

您的右侧标题不可见，因为[leftHeader]和[rightHeader]上的边框导致两个元素的大小都超过50％。

最简单的解决方法是在宽度声明

中使用calc（）函数

.example {
    width: calc(50%  - 3px)
}

以上将宽度设置为屏幕或容器的50％，然后将其缩小3px以允许边框。

[照片]，[摘要]和[主要]不会重新调整尺寸，因为您已经给出了固定尺寸而不是相对尺寸。随着屏幕变小，这些只占用更多空间而不是调整。这就是[页脚]重叠的原因，因此它可以位于指定的位置。

我在下面提供了一个修复程序，用于导航和标题的正确放置和大小。这应该有助于指导您解决其余问题。

＆＃13;

    #header{
        position: fixed;
        width:calc(100% - 206px);
        height: 100px;
        float:left;
        top: 0;
        right: 0;
        border: solid 3px;
        background-color: yellow;
    }
    
    #leftHeader{
    
        width:calc(50% - 3px);
        height: 100%;
        display:inline-block;
        border-right: solid 2px;
        text-align: center;
    }
    #rightHeader{
        width:calc(50% - 3px);
        height: 100%;
        display:inline-block;
        text-align: center;
    }
    
    #navBar {
        background-color: lightgreen;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 197px;
        border: solid 3px;
    }

＆＃13;

<div id="navBar">
    <strong>Assignments</strong>
    <ul>
        <li><a href="Assignment1/">Assignment 1</a></li>
        <li><a href="Assignment2/">Assignment 2</a></li>
        <li><a href="Assignment3/">Assignment 3</a></li>
        <li><a href="Assignment4/">Assignment 4</a></li>
    </ul>
    <br/>
    <strong>Lab Practica</strong>
    <ul>
        <li><a href="Practicum1">Practicum 1</a></li>
        <li><a href="Practicum2">Practicum 2</a></li>
    </ul>
</div>

<div id="header">
    <div id="leftHeader">
        <p class="header">
            Class (Semester 2016)<br/>
            Professor Name Here<br/>
            George Mason University
        </p>
    </div>
    <div id="rightHeader">
        <p class="header">
            Name Here<br/>
            <a href="mailto:email3@gmu.edu">email@gmu.edu</a><br/>
            <strong>Last Modified: </strong><em>Time Date Zone</em>
        </p>
    </div>
</div>

＆＃13;

一些浮动项目没有适当调整大小（CSS / XHTML）

1 个答案: