2016-11-12 372 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? –