如何調整3 div相對於他們的父母（響應）

Question

如何調整3 div相對於他們的父母？ page-wrap是主要的div。

好吧，這裏是codepen

#page-wrap { width: 960px; margin: 60px auto; } 

#map_canvas { width: 100%; height: 400px; width: 300px; float: left; position: relative; z-index: 30 !important; } 

#locations { list-style: none; width: 250px; float: left; } 

#more-info > div { background: #e9e2bf; -moz-box-shadow: 0 0 14px rgba(70,49,1,0.5); -webkit-box-shadow: 0 0 14px rgba(70,49,1,0.5); padding: 20px; height: 320px; } 

Answer 1

代碼試試這將工作

#page-wrap { 
 
    width: 100%; 
 
    margin: 60px auto; 
 
} 
 

 
#map_canvas { 
 
    width: 33.33%; 
 
    height: 400px; 
 
    float: left; 
 
    position: relative; 
 
    z-index: 30 !important; 
 
    box-sizing: border-box; 
 
} 
 

 
#locations { 
 
    list-style: none; 
 
    width: 33.33%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
#locations li { 
 
    width: 100%; 
 
} 
 

 
#more-info { 
 
    width: 33.33%; 
 
    box-sizing: border-box; 
 
} 
 

 
#more-info>div { 
 
    background: #e9e2bf; 
 
    -moz-box-shadow: 0 0 14px rgba(70, 49, 1, 0.5); 
 
    -webkit-box-shadow: 0 0 14px rgba(70, 49, 1, 0.5); 
 
    padding: 20px; 
 
    height: 320px; 
 
}