部門不按最高價值百分比移動

-1

我有三個容器在其中將被填充其他東西的頁面上。然而，我似乎無法得到頂部轉移這些容器的百分比，所以他們適當調整大小。我正在使用職位：如果有任何意義的話，這是相對的。任何幫助，將不勝感激！部門不按最高價值百分比移動

    position:relative; 
 
       height:100%; 
 
       width:100% 
 
       } 
 
       .picturebox { 
 
       position: relative; 
 
       border: solid white 1px; 
 
       min-width: 25%; 
 
       max-width: 25%; 
 
       height: 100%; 
 
       top: -350px; 
 
       } 
 
       .servicepic { 
 
       position: relative; 
 
       width: 100%; 
 
       top: 30%; 
 
       padding: 2%; 
 
       -webkit-box-sizing: border-box; 
 
       -moz-box-sizing: border-box; 
 
       box-sizing: border-box; 
 
       } 
 
       .middlecontainer { 
 
       position: relative; 
 
       border: solid white 1px; 
 
       min-width: 60%; 
 
       max-width: 60%; 
 
       top: 500%; 
 
       left: 25.1%; 
 
       } 
 
       .rightcontainer { 
 
       position: relative; 
 
       border: solid white 1px; 
 
       min-width: 14.75%; 
 
       max-width: 14.75%; 
 
       height: 100%; 
 
       top: -629px; 
 
       left: 85.2%;

<html> 
 

 
<body> 
 
    <div class="bigbox"> 
 
    <div class="container"> 
 
     <div class="title"> 
 
     <h1>Codes' Decoding</h1> 
 
     <br> 
 
     <h2 id="slogan">"Providing all of your web design needs"</h2> 
 
     </div> 
 
    </div> 
 
    <div id="buttoncontainer"> 
 
     <a href="file:///C:/Users/Cody/Desktop/Websites/Practice.html"> 
 
     <div class="breadcrumb1"> 
 
      <p>Home</p> 
 
     </div> 
 
     </a> 
 
     <a href="breadcrumb2"> 
 
     <div class="breadcrumb2"> 
 
      <p>Stuff</p> 
 
     </div> 
 
     </a> 
 
     <a href="breadcrumb3"> 
 
     <div class="breadcrumb3"> 
 
      <p>Stuff</p> 
 
     </div> 
 
     </a> 
 
     <a href="breadcrumb4"> 
 
     <div class="breadcrumb4"> 
 
      <p>Stuff</p> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    <div class="lightestl"> 
 
     <p> 
 
     <br> 
 
     <br> 
 
     </p> 
 
    </div> 
 
    <div class="nextlightestl"> 
 
     <p> 
 
     <br> 
 
     <br> 
 
     </p> 
 
    </div> 
 
    <div class="nextdarkestl"> 
 
     <p> 
 
     <br> 
 
     <br> 
 
     </p> 
 
    </div> 
 
    <div class="darkestl"> 
 
     <p> 
 
     <br> 
 
     <br> 
 
     </p> 
 
    </div> 
 
    <div class="lightestr"> 
 
     <p> 
 
     <br> 
 
     <br> 
 
     </p> 
 
    </div> 
 
    <div class="nextlightestr"> 
 
     <p> 
 
     <br> 
 
     <br> 
 
     </p> 
 
    </div> 
 
    <div class="nextdarkestr"> 
 
     <p> 
 
     <br> 
 
     <br> 
 
     </p> 
 
    </div> 
 
    <div class="darkestr"> 
 
     <p> 
 
     <br> 
 
     <br> 
 
     </p> 
 
    </div> 
 
    <div class="giantbox"> 
 
     <div class="picturebox"> 
 
     <img class="servicepic" src="http://exportbaltic.com/sites/default/files/styles/gallery_large_640/public/product-images/Export-Baltic.jpeg?itok=Cs0mNaSk"> 
 
     </div> 
 
     <div class="middlecontainer"> 
 
     <p>hello</p> 
 
     </div> 
 
     <div class="rightcontainer"> 
 
     <p>hello</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-12-24 Cody DeBos

你想要什麼輸出，到目前爲止你嘗試過了什麼？ – DustinPianalto

我想弄明白這三個div都在同一高度。我已經在這裏嘗試了一切，我不知道還有什麼可以嘗試的 –

你有3個以上的div，你想要3個同樣的高度嗎？你同樣身高是什麼意思？頁面上的垂直位置相同，還是大小相同？ – DustinPianalto

我的朋友，你在做什麼，是不是好的做法的。

這是

<div class = "lightestl"><p><br><br></p></div> 
<div class = "nextlightestl"><p><br><br></p></div> 
<div class = "nextdarkestl"><p><br><br></p></div> 
<div class = "darkestl"><p><br><br></p></div> 
<div class = "lightestr"><p><br><br></p></div> 
<div class = "nextlightestr"><p><br><br></p></div> 
<div class = "nextdarkestr"><p><br><br></p></div> 
<div class = "darkestr"><p><br><br></p></div>

的這個，你可以使用相對位置的每一件事也並不好把圖像或漸變CSS

代替。

，使3容器大小相同的檢查Flexbox的對齊

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2015-12-24 01:09:57

爲了得到這個輸出：Fiddle我改變了position: relative;到position: absolute;對有問題的div，然後定義三個位置直接的div使用top: 0;，width: %;取決於使他們加起來爲100％的div的所需寬度，我也刪除邊距，以便將它們組合在一起均勻，並用left: %;其中％是頁的div的使用到的百分比剩下。

這種方法的問題是它不是很動態。做你想要的最好的方法是使用一個框架，如Bootstrap。

來源

2015-12-24 01:29:52 DustinPianalto

部門不按最高價值百分比移動

回答

相關問題