一些浮动项目不 re-sizing 适当 (CSS / XHTML)

Question

所以，我正在使用 XHTML 和 CSS 完成一项学校作业。

我在页面的主要布局的许多地方使用了浮动 css 属性。当 re-sizing 浏览器时，只有部分项目 re-size 正确。

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

我在顶部有 header（它有一个容器 [header]，然后在 [leftHeader 和 rightHeader] 中有两个单独的 div。正确的 header 似乎不 re-size 正确（即使在 JSFiddle 示例中你甚至看不到它）。

另一个问题是主容器由[main]组成，作为容器div容纳所有主要内容，然后在[照片]和[摘要]。 [照片] 和 [摘要] 未 re-size 适当地位于 [主] 内， [摘要] 与页脚重叠。

据我所知，[页脚] 和 [导航栏] re-size 还不错。

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

JSFiddle：https://jsfiddle.net/0mjezprv/

            <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

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

更正此问题的最简单方法是在宽度声明中使用 calc() 函数

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

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

[照片]、[摘要] 和 [主要] 不会 re-size，因为您给它们指定了固定大小而不是相对大小。随着您的屏幕变小，这些只会占用更多 space 而不是调整。这就是 [footer] 重叠的原因，以便它可以位于指定位置。

我在下面提供了一个修复程序，用于导航和 headers 以正确定位和调整大小。这也应该有助于指导您解决其余问题。

    #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;
    }

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

一些浮动项目不 re-sizing 适当 (CSS / XHTML)

Some floating items are not re-sizing appropriately (CSS / XHTML)

html

css

xhtml

resize

css-float