無法編輯圖像div div css

我想建立一個網站，我正在製作一個圖像集合，我想成爲一個約20個像素的邊緣（圖像是在一個div重複無論有多少圖像）。當我運行代碼時，圖像出現在一個奇怪的配置中，因爲它們似乎是分層的。當我將「img」添加到div類時，圖像出現在不是我想要的列中。我創建了一個非常簡單的網站示例，其中包含三張重複的圖像，我想成爲一排。在以前的網站中，我已經能夠使圖像連續出現（我希望它的樣子），但現在，這根本行不通。我會提供我的代碼。任何幫助，將不勝感激：）。無法編輯圖像div div css

<!DOCTYPE html> 
<html> 

<head> 
    <title>Home</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 

    <body> 

     <div class="heading"> 
      <h1>Test</h1> 
     </div> 

     <div class="image"> 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
     </div> 

     <div class="image"> 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
     </div> 

     <div class="image"> 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
     </div> 

    </body> 

</html>

更新正確的CSS：

.image{ 
    display: inline-block; 
    width: 333px; 
    height: 250px; 
    margin: 50px; 
} 

    .image img { 
    width:100%; 
    height: 100%; *addition made by myself*

UPDATE 當我運行編輯的代碼，並添加6幅圖像不會進行調整。有沒有解決這個問題？

UPDATE添加高度：100％;似乎已經解決了這個問題。我將更新這個問題來佈置解決問題的所有步驟。

來源

2016-07-24 rmce

需要知道什麼是樣式表'main.css' – zer00ne

的樣式高於 – rmce

的「CSS」的一部分，你可以發佈鏈接？ –

只需添加.image img {width:100%;} 使圖像將捂整個父DIV並不會重疊

.image{ 
 
    display: inline-block; 
 
    width: 333px; 
 
    height: 250px; 
 
    margin: 20px; 
 
} 
 

 
.image img { 
 
    width:100%; 
 
} 
 

 
.heading{ 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Home</title> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 

 
    <body> 
 

 
     <div class="heading"> 
 
      <h1>Test</h1> 
 
     </div> 
 

 
     <div class="image"> 
 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
     </div> 
 

 
     <div class="image"> 
 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
     </div> 
 

 
     <div class="image"> 
 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
     </div> 
 

 
    </body> 
 

 
</html>

來源

2016-07-24 21:02:19 splunk

感謝您的幫助！這解決了我的問題，雖然我不知道爲什麼我能夠在沒有此代碼的情況下在以前的網站上實現我期望的結果 – rmce

你好檢查，如果是確定的？

.image img{ 
 
    display: inline-block; 
 
    width: 333px; 
 
    height: 250px; 
 
    margin: 20px; 
 
} 
 

 
.heading{ 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Home</title> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 
<body> 
 

 
<div class="heading"> 
 
<h1>Test</h1> 
 
</div> 
 

 
<div class="image"> 
 
    <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
</div> 
 

 
<div class="image"> 
 
    <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
</div> 
 

 
<div class="image"> 
 
    <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
</div> 
 

 
</body> 
 
</html>

來源

2016-07-24 21:04:58

無法編輯圖像div div css

回答

相關問題