abc.htm

Question

div的内容不是以响应方式工作。当我试图减小浏览的大小时，div的内部内容就会出现。

我想制作这种响应方式，当我将减少浏览器的大小后，它将作为单行内容出现一个阈值点，什么都不会出现。

这是我的代码，我写的是===＆gt;

abc.htm

＆＃13;

.projects{
  position: absolute;
  top: 110%;
  height: 110% !important;
  width: 100% !important;
  background-color: #363636;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  vertical-align: top;

}
.project_heading{
  position: absolute;
  top:5%;
  left: 40%;
  font-family:Courier, Monaco, monospace;
  color: #9c9c9c;
  font-size: 1.8em;
  letter-spacing: 8px;
  border: 1px solid black;
}
.skill_sets{
position: absolute;
height: 400px;
width: 200px;
left: 70%;
top: 20%;
border: 1px solid black;
}

.skills_heading{
  position: absolute;
  top:25%;
  
  height: 40px;
  width: 100%;
  /*border: 1px solid black;*/
  font-family:Courier, Monaco, monospace;
  color: #9c9c9c;
  font-size: 1.8em;
  /*letter-spacing: 8px;*/
  background-color: #3a3a3a;
  margin: 40 0px;
}

＆＃13;

 <html>
    <head>
    	<link rel="stylesheet" media="screen" href="cc.css">
    
    </head>
    <body>
    <div id="content" class="content">
    	<!-- <div id="doing_box_closed" class="doing_box_closed">
    	</div> -->
    
    	<div id="projects" class="projects">
    		<p id="project_heading" class="project_heading">PROJECTS</p>
    		<div id="skill_sets" class="skill_sets">
    			<p id="skills_heading" class="skills_heading">Skills</p>
    		</div>
    	
    	</div>
    	
    
    </div>
    </body>
    </html>

＆＃13;

Answer 1

问题在于您的.skill_sets试试这个：

.skill_sets {
    /* position: absolute; */
    height: 400px;
    /* width: 200px; */
    /* left: 70%; */
    top: 20%;
    border: 1px solid black;
}

当您使用position:absolute时，它会强制元素的位置，并且您将其与left:70%以及明确的width:200px捆绑在一起，因此很明显它会外出容器。

div的内容没有响应

abc.htm

1 个答案: