需要幫助在我的代碼中的CSS定位

Question

我一直在努力與一些CSS樣式。問題是我無法正確定位圖像。由於某種原因，圖像無法以正確的預期流程顯示。我也想集中整個內容。調整瀏覽器大小時，它不能正確集中。一旦你複製過我的代碼，你可以很容易地注意到所有這些問題。這是我的代碼。由於 HTML

body { 
 
     font-family: 'Open sans',sans-serif; 
 
    } 
 
    
 
    #content p { 
 
     padding: 5px; 
 
     font-size: 0.8em; 
 
    } 
 
    
 
    #wrap { 
 
     max-width: 900px; 
 
     padding: 3%; 
 
     margin: 0 auto; 
 
    } 
 
    
 
    ul { 
 
     list-style-type: none; 
 
     padding: 0; 
 
    } 
 
    
 
    #contact a { 
 
     padding-left: 35px; 
 
     background-repeat: no-repeat; 
 
     background-size: 20px; 
 
    } 
 
    #content a { 
 
     width: 100%; 
 
     display: inline-block; 
 
     height: 100%; 
 
    } 
 
    
 
    #content li img { 
 
     width: 100%; 
 
    } 
 
    
 
    a { 
 
     text-decoration: none; 
 
    } 
 
    
 
    #content li { 
 
     float: left; 
 
     width: 25%; 
 
     margin: 3%; 
 
     box-sizing: border-box; 
 
     background-color: bisque; 
 
    } 
 
    footer { 
 
     clear: both; 
 
     text-align: center; 
 
    } 
 
    
 
    footer img { 
 
     width: 25px; 
 
    } 
 
    
 
    h1 { 
 
     font-weight: normal; 
 
     font-family: 'Change one', sans-serif; 
 
     color: #fff; 
 
     font-size: 2.4em; 
 
     padding: 0px; 
 
     margin: 0px; 
 
     display: inline-block; 
 
    } 
 
    
 
    h2 { 
 
     font-size: .9em; 
 
     font-weight: normal; 
 
     color: #fff; 
 
     margin: 10px 0; 
 
    } 
 
    
 
    #content ul { 
 
     padding: 0; 
 
     margin: 0; 
 
    }

 <div id="wrap"> 
 
       <div id="content"> 
 
       <ul> 
 
        <li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg"> 
 
        <p>Experimentation with color and texture</p></a> 
 
        </li> 
 
        <li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg"> 
 
        <p>Experimentation with color and texture Experimentation with color and texture</p></a> 
 
        </li> 
 
        <li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg"> 
 
        <p>Experimentation with color and texture</p></a> 
 
        </li> 
 
        <li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg"> 
 
        <p>Experimentation with color and textureExperimentation with color and texture</p></a> 
 
        </li> 
 
        <li><a href="img/numbers-12.jpg"><img src="img/numbers-12.jpg"> 
 
        <p>Experimentation with color and texture</p></a> 
 
        </li> 
 
       </ul> 
 
       </div> 
 
     
 
       <footer> 
 
       <img src="img/twitter-wrap.png"> 
 
       <img src="img/facebook-wrap.png"> 
 
       <p>&copy; 2014 Chimed.</p> 
 
       </footer> 
 
      </div>

Answer 1

的問題是，一些在<p>元素文本的項目換到3號線，有的只換到2號線。這使得他們比其他人高。當下一個<li>包裝到下一行時，它會位於較高項目的右側。

視覺上表示：

爲了解決這個問題，你可以嘗試讓所有項目相同的高度。那樣他們會圍繞對方乾淨地包起來。

Answer 2

到目前爲止我已經看到兩個「問題」出現在你的代碼中。

您試圖將您的內容居中並使用#wrap正確完成。但列表中的列表元素的寬度各爲25％，外加3％的邊際，因此總數爲31％。所以最接近100％寬度的周圍元素是93％，在右側留下空隙，因爲您的列表元素爲float: left。這應該可以解決這個問題：

ul { 
    width: 93%; 
    margin: 0 auto; 
    list-style-type: none; 
    padding: 0; 
} 

#content li { 
    display: inline-block; 
    vertical-align: top; 
    width: 25%; 
    margin: 3%; 
    box-sizing: border-box; 
    background-color: bisque; 
} 

我加了一個寬度和居中緣至ul和你現在li元素是內聯塊，並在其頂部線對齊。