html 和 css 响应式设计没有按照我想要的方式调整 div 的大小答案

【问题标题】：html and css responsive design not resizing the divs the way I wanthtml 和 css 响应式设计没有按照我想要的方式调整 div 的大小
【发布时间】：2016-12-19 17:46:29
【问题描述】：

我正在制作一个仅使用 HTML 和 CSS 的网站。我的网站目前看起来像this。忽略损坏的文本，因为它们不是我的问题。

标题和导航栏（垂直排列的颜色块）是固定位置，最右边的 div 我命名为 .content 是可滚动的。

问题是，每当我尝试调整网站大小以使其变小时，div 就会变得不合适，而不是我想要的方式。调整大小后看起来像this。避免断词，它们不是问题。问题是导航栏（我命名为 .nav）没有粘在标题 div（我命名为 .header）上。

这是我的 HTML 代码：

/* entire website */

    body
    {
	    background: #E3AB42;
	    margin-top: 0px; 
	    margin-left: 0px;
    }

    /* box sizing */
    * {
       box-sizing: border-box;
    }

    /* all about the header */

    .header {
	    background-color: #060606; /*666!!!!*/
	    height: 100%;
	    position: fixed;
    }

    .header img {
	    margin-left: 25px;
	    margin-top: 20px;
    }

    .header p {
	    transform: rotate(270deg);
	    color: white;
	    font-family:  Optima, "Times New Roman", Georgia, Serif;
    }

    .header .title {
	    margin-top: 220px;
	    margin-left: -150px;
	    display: inline-block;
	    font-size: 88px;
    }

    .header .subtext {
	    display: inline-block;
	    text-align: right;
	    margin-top: -300px;
	    margin-right: -55px;
	    font-size: 33px;
	    white-space: nowrap;
    }

    /* navigation general codes */

    .nav {
	    position: fixed;
	    height: 100%;
	    margin-left: 225px;
    }

    .nav div {
	    height: 20%;
	    padding: 0;
    }

    .nav p {
	    color: white;
	    font-family:  Optima, "Times New Roman", Georgia, Serif;
	    font-size: 33px;
	    transform: rotate(270deg);
	    text-align: center;
	    display: inline-block;
    }

    a:link {
	    text-decoration: none;
    }

    /* navigation vertical texts 

    #verticalnewbie {
	    margin-top: 73px;
    }

    #verticalskill {
	    margin-top: 65px;
    }

    #verticalheroes {
	    margin-top: 78px;
    }

    #verticalmindset {
	    margin-top: 85px;
    }

    #verticalteam {
	    margin-top: 59px;
    }

    /* navigation button colours */

    .newbie {
    	background: #E3AB42;
    }

    .skills {
	    background: #FAA02E;
    }

    .heroes{
    	background: #B17C3B;
    }

    .mindset {
    	background: #584F4A;
    }

    .team {
    	background: #2F2526;
    }

    /* general content */

    .content { 
    	width: 70%;
    	height: auto;
    }
    
    /* .content #examplar {
    	float: right;
	    height: auto;
    	width: 25%;
    }

    /* page colours */

    body#pagenewbie {
    	background: #E3AB42;
    }

    body#pageskill {
    	background: #FAA02E;
    }

    body#pageheroes {
    	background: #B17C3B;
    }

    body#pagemindset {
    	background: #584F4A;
    }

    body#pageteams {
    	background: #2F2526;
    }

    /* content texts */

    .content h1 {
	    text-align: center;
	    color: white;
	    font-family: Optima, "Times New Roman", Georgia, Serif;
	    font-size: 66px;
    }

    .content li {
	    color: white;
	    font-family: Optima, "Times New Roman", Georgia, Serif;
	    font-size: 33px;
	    font-weight: bold;
	    list-style-type: none;
    }

    .content p {
    	list-style-type: none;
	    text-decoration: none;
	    color: white;
	    font-family:  Optima, "Times New Roman", Georgia, Serif;
	    font-size: 22px;
    }

    /* hover */

    #dropdown:hover span {
	    display: block;
        font-size: 13px;
        height: auto;
        width: 200px;
        color: white;
        letter-spacing: 1px;
        text-align: left;
        padding: 5px 20px;
	    position: absolute;
	    margin-top: -40px;
	    margin-left: 880px;
    	font-family:  Optima, "Times New Roman", Georgia, Serif;
    }

    body#pagenewbie #dropdown:hover span {
        background: #E6B355;
        border: 5px solid #C19138;
    }

    body#pageskill #dropdown:hover span {
	    background: #FAAA43;
	    border: 5px solid #D48827;
    }

    body#pageheroes #dropdown:hover span {
	    background: #B9894F;
	    border: 5px solid #966932;
    }

    body#pagemindset #dropdown:hover span {
	    background: #69615C;
	    border: 5px solid #4B433F;
    }

    body#pageteams #dropdown:hover span {
    	background: #443B3C;
    	border: 5px solid #281F20;
    }

    #dropdown {
	    color: #E6E6E6;
    }

    #infoone {
	    display: none;
    }

    /* grid boxes */

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    
    [class*="col-"] {
        float: right;
    }

<!DOCTYPE html>
    <html>
	    <head>
		    <title>Overtips</title>
		    <link rel="stylesheet" type="text/css" href="theme.css" />
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    </head>
	
	    <body id="pagenewbie">
		
		    <div class="row">
  			    <div class="col-1"></div>
  			    <div class="col-2"></div>
  			    <div class="col-3"></div> <!-- 25% -->
  			    <div class="col-4"></div>
  			    <div class="col-5"></div>
  			    <div class="col-6"></div>
  			    <div class="col-7"></div>
  			    <div class="col-8"></div>
  			    <div class="col-9"></div> <!-- 75% -->
  			    <div class="col-10"></div>
  			    <div class="col-11"></div>
  			    <div class="col-12"></div>
	    </div>

		<div class="container">
		
			<div class="col-2 header">
				<div class="logo"><img src="overlogo.png"></div>
				<div class="title"><p>OVERTIPS</p></div>
				<div class="subtext"><p>Mainly for beginner and<br>intermediate players</p></div>
			</div>
			
			
			<div class="col-1 nav">
			
				<a href="file:///Users/marvin.chong021/Desktop/Website/index.html"><div class="newbie"><p id="verticalnewbie">NOVICE</p></div></a> 
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overskill.html"> <div class="skills"><p id="verticalskill">SKILLS</p></div></a>
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overheroes.html"> <div class="heroes"><p id="verticalheroes">HEROES</p></div></a>
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overmindset.html"> <div class="mindset"><p id="verticalmindset">MINDSET</p></div></a> 
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overteams.html"> <div class="team"><p id="verticalteam">TEAM</p></div></a>
				
			</div>
			
			<div class="col-9 content">
			
				<h1>Novice Section</h1>
				<li>In-game settings</li>
				<p>Firstly, in <a id="dropdown">game settings<span id="infoone">It is a menu with options to change.</span></a>. Like any other game, you want to check your in game setting before playing the game. Everyone is different and different people prefer different settings. You may need to experiment with your heroes (characters you can play) and play around a little and see what you need to change. Assuming you know what you need to change, you can go to options menu by pressing escape or going to game menu screen and change the setting you want. </p>
			</div>
		</div>
	</body>
</html>

我怀疑这与 [class*="col-"] { 浮动：对； } 我尝试将其更改为向左，除了 .content 向左移动之外，问题仍然存在。

【问题讨论】：

你能显示工作代码吗？请使用代码编辑器。
为什么不把 .nav 放在 .header div 里面呢？我认为在那种情况下它会更好地工作:)

标签： html css responsive-design

【解决方案1】：

将网格框的样式移到正文之后。像这样

body
{
    background: #E3AB42;
    margin-top: 0px;
    margin-left: 0px;
}

/* grid boxes */

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: right;
}

然后将固定宽度添加到您的标题中：

.header {
    background-color: #060606;
    height: 100%;
    width:225px;
    position: fixed;
}

如果您不将网格框样式移到标题样式之前，那么它们会覆盖这个样式。所以不要忘记第一步。

【讨论】：

【解决方案2】：

问题是您将.nav 元素设置为fixed 和margin-left: 225px;，但在第二张图片中.header 显然更小！

你至少应该设置

.header {
   width: 225px;
}

否则您应该调整 .nav margin-left 以匹配 .header 的宽度

【讨论】：