2016-11-12 165 views
0

enter image description here内容不响应

的DIV的内容我想,以减少浏览随后的div内的内容出来的大小是不工作的响应manner.When。

我想做出这种响应的方式,当我将在阈值点之后减小浏览器的大小时,它将作为单行内容出现,而且什么都不会出现。

这里是我的代码,我有写===>

abc.htm

.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; 
 
}
<html> 
 
    <head> 
 
    \t <link rel="stylesheet" media="screen" href="cc.css"> 
 
    
 
    </head> 
 
    <body> 
 
    <div id="content" class="content"> 
 
    \t <!-- <div id="doing_box_closed" class="doing_box_closed"> 
 
    \t </div> --> 
 
    
 
    \t <div id="projects" class="projects"> 
 
    \t \t <p id="project_heading" class="project_heading">PROJECTS</p> 
 
    \t \t <div id="skill_sets" class="skill_sets"> 
 
    \t \t \t <p id="skills_heading" class="skills_heading">Skills</p> 
 
    \t \t </div> 
 
    \t 
 
    \t </div> 
 
    \t 
 
    
 
    </div> 
 
    </body> 
 
    </html>

+1

像素中的百分数和宽度都是'left',你还期望什么?你能分享一下它应该是什么样子的模型吗? – mizurnix

+0

也你不应该需要这么多的绝对位置。这不是创建布局的好方法。考虑使用flexbox – mizurnix

+0

okk我得到了你的观点....问题是在宽度像素....谢谢:) @mizurnix –

回答

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捆绑在一起,因此很明显它会从容器中出来。

+0

...在第1 sill_set将在左边70%...当我将减少浏览器大小然后跨过阈值它将在垂直线...就像在第1它将打印项目的内容,然后打印skill_set ..... okk? –