无法编辑图像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

回答

相关问题