Question

我正在尝试在main_block div中创建一个带填充的图片网格。我不能把图像分别放在彼此旁边，然后打开它，因为它们是内联的。内联块不起作用。我尝试为这些图像制作一个新的div，但我不能调整图片的大小，也不能给它们填充。我试图使图片可调整大小但没有结果。 iut就好像有些东西覆盖了图片的大小。图片堆叠在一起，我试图maaake网格。在此先感谢您的帮助！ This would be the optimal solution.

这是小提琴 https://jsfiddle.net/q2cr9ttL/1/

 <style> 
 body {
   margin: 0;
   padding: 0;
 }
 
 #header {
   background-color: #ff6600;
   color: white;
   text-align: left;
   padding: 2px;
 }
 
 #nav {
   line-height: 30px;
   background-color: #fff000;
   height: 350px;
   width: 125px;
   float: left;
   padding: 5px;
 }
 
 #section {
   width: 350px;
   float: left;
   padding: 10px;
 }
 
 #footer {
   background-color: #737373;
   color: white;
   clear: both;
   text-align: center;
 }
 
 #container {
   margin: auto;
   width: 900px;
   text-align: left;
   overflow: hidden;
 }
 
 .inner_block {
   display: inline-block;
   text-align: center;
   width: 350px;
   height: 200px;
 }
 

 .main_block {
   text-align: center;
   width: 750px;
 }
 

  .grid_block {
   display: inline-block;
   text-align: center;
   width: 29%px;
   height:100px;
 }
 
 </style>

<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />

<body>
  <div id="container">
    <!---container--->
    <div id="header">
      <h1>JORDAS</h1>

    </div>
    <!--header-->

    <div id="nav">
      <a href="index.html">Etusivu</a>
      <br>
      <a href="teltat.html">Teltat</a>
      <br>
      <a href="page2.html">Palvelut</a>
      <br>
      <a href="Yhteystiedot.html">Yhteistiedot</a>
      <br>
    </div>

    <div id="section">


   <div class="main_block">

    <div class="grid_block">
        <img src=Grafik/basictalt.png>
    </div>

    <div class="grid_block">
        <img src=Grafik/basictalt.png >
    </div>    
	
	 <div class="grid_block">
	
        <img src=Grafik/basictalt.png>
    </div>
	  

</div><!--mainblock-->

    </div>

    <div id="footer">
      <h3>POP-UP TELTTOJEN YKKÖNEN </h3>
    </div>
    <!--footer-->
  </div>
  <!--container-->
</body>

Answer 1

您可以使用flex显示属性。

您需要包含一些前缀以实现跨浏览器兼容性。

* {
  box-sizing: border-box;
}

.main_block {
  display: flex;
  flex-wrap: wrap;
}

.grid_block {
  width: 33%;
  padding: 1.4em
}

.grid_block img {
  max-width: 100%
}


/* ORIGINAL STYLES */
body {
  margin: 0;
  padding: 0;
}

#header {
  background-color: #ff6600;
  color: white;
  text-align: left;
  padding: 2px;
}

#nav {
  line-height: 30px;
  background-color: #fff000;
  height: 350px;
  width: 125px;
  float: left;
  padding: 5px;
}

#section {
  width: 350px;
  float: left;
  padding: 10px;
}

#footer {
  background-color: #737373;
  color: white;
  clear: both;
  text-align: center;
}

#container {
  margin: auto;
  width: 900px;
  text-align: left;
  overflow: hidden;
}

.inner_block {
  display: inline-block;
  text-align: center;
  width: 350px;
  height: 200px;
}

.main_block {
  text-align: center;
  width: 750px;
}

.grid_block {
  display: inline-block;
  text-align: center;
  width: 29%px;
  height: 100px;
}

 <div id="container">
    <!---container--->
    <div id="header">
      <h1>JORDAS</h1>

    </div>
    <!--header-->

    <div id="nav">
      <a href="index.html">Etusivu</a>
      <br>
      <a href="teltat.html">Teltat</a>
      <br>
      <a href="page2.html">Palvelut</a>
      <br>
      <a href="Yhteystiedot.html">Yhteistiedot</a>
      <br>
    </div>

    <div id="section">


   <div class="main_block">

    <div class="grid_block">
        <img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
    </div>

    <div class="grid_block">
        <img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
    </div>    
	
	 <div class="grid_block">
	
        <img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
    </div>
	  

</div><!--mainblock-->

    </div>

    <div id="footer">
      <h3>POP-UP TELTTOJEN YKKÖNEN </h3>
    </div>
    <!--footer-->
  </div>
  <!--container-->

如何使用HTML在div中创建带有图像的网格？

1 个答案: