如何使所有的div圖像在同一個地方

html { 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
body {margin: 0; 
 
    padding: 0; 
 
} 
 

 
#wrapper { 
 
    padding-left:50px; 
 
    padding-top:30px; 
 
} 
 

 
#third, fifth { 
 
    background-color:#E8E8E8 ; 
 
} 
 
    
 
img[src^="my_menu.png"] { 
 
    z-index:10; 
 
} 
 
    
 
#second, #third, #fourth, #fifth { 
 
    width:100%; 
 
    height:100vh; 
 
    padding:0px; 
 
    margin:0; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    background-color:white; 
 
    z-index:-1; 
 
} 
 

 
#second { 
 
    width:100%; 
 
    height:100vh; 
 
    padding:0px; 
 
    margin:0; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    margin-top:100vh; 
 
} 
 

 
#fourth, #second { 
 
     background-color:grey; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Add gospel Přerov</title> 
 
     
 
     <meta charset="utf-8" /> 
 
     <meta name="viewport" content="width=device-width" /> 
 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
 
    </head> 
 
    
 
    <body> 
 
     <div class="wrapper"> 
 
      <div id="second">  
 
      </div> 
 
      
 
      <div id="third">  
 
      </div> 
 
       
 
      <div id="fourth"> 
 
      </div> 
 
       
 
      <div id="fift"> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

我想提出一個網站，我的客戶，我需要幫助。我想製作4個div，高度爲100vh，寬度等於100%。這就是我所擁有的。現在，我需要將箭頭朝向所有這些div，位於底部中心的某個位置。怎麼做？

來源

2015-10-18 David Stančík

請發佈一些相關的代碼，我們可以一起工作，甚至更好 - 提供[小提琴] （http://jsfiddle.net）演示。 –

我不確定這是你想要的，但根據你的問題，這可能是你想達到的目標。剛剛創建，並內置圖像div（你也可以使用background屬性箭頭圖像）

html * { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
.full { 
 
    position: relative; 
 
    height: 100vh; 
 
    width: 100%; 
 
} 
 
.full:nth-child(1) { 
 
    background: cyan; 
 
} 
 
.full:nth-child(2) { 
 
    background: magenta; 
 
} 
 
.full:nth-child(3) { 
 
    background: yellow; 
 
} 
 
.full:nth-child(4) { 
 
    background: lightgray; 
 
} 
 
.arrow-down { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    width: 32px; 
 
    height: 32px; 
 
    left: calc(50% - 16px); 
 
} 
 
.arrow-down > img { 
 
    width: 100%; 
 
}

<div class="full"> 
 
    <div class="arrow-down"> 
 
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down"> 
 
    </div> 
 
</div> 
 
<div class="full"> 
 
    <div class="arrow-down"> 
 
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down"> 
 
    </div> 
 
</div> 
 
<div class="full"> 
 
    <div class="arrow-down"> 
 
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down"> 
 
    </div> 
 
</div> 
 
<div class="full"> 
 
    <div class="arrow-down"> 
 
    <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down"> 
 
    </div> 
 
</div>

來源

2015-10-18 20:18:49

正是我想要的！感謝兄弟:) –

@PetrCihlar不用客氣;） –

如何使所有的div圖像在同一個地方

回答

相關問題