如何在 HTML 中将两张图片与上面的文字并排放置

Question

我试图将 html（css）中的两张图片并排放置，并用小填充在两者之间获得 space，并在上方添加一些文字二。这将在 "section div" 内，我设法将它们并排放置，但所有工作都丢失了，我没有设法将文本放在图像上方。任何帮助表示赞赏！谢谢！

#header {
  background-color:#ff6600;
  color:white;
  text-align:left;
  padding:2px;
}
#nav {
  line-height:30px;
  background-color:#fff000;
  height:350px;
  width:189px;
  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;
}

<div id="container">
  <!---container--->
  <div id="header">
    <h1>JORDAS</h1>

  </div>
  <!--header-->

  <div id="nav">
    <a href="index.html">Etusivu</a>
    <br>
    <a href="page1.html">Teltat</a>
    <br>
    <a href="page2.html">Palvelut</a>
    <br>
    <a href="page3.html">Yhteistiedot</a>
    <br>
  </div>

  <div id="section">
    <a href="page2.html"><h1>Pro</h1></a>
    <div class="main_block">

      <div class="inner_block">
        <img src=Grafik/talt.png>
      </div>

      <div class="inner_block">
        <img src=Grafik/talt.png>
      </div>

    </div>
    <!--mainblock-->
  </div>

  <div id="footer">
    <h3>POP-UP TELTTOJEN YKKÖNEN </h3>
  </div>
  <!--footer-->
</div>
<!--container-->

jsFiddle

Answer 1

这应该可以解决您的问题。

.inner_block{
   float: left;
 }

Answer 2

您的图片在默认情况下为块级的 div 中。将它们设置为 inline 或 inline-block 以使图像并排放置：

 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: 189px;
   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;
 }

<div id="container">
  <!---container--->
  <div id="header">
    <h1>JORDAS</h1>

  </div>
  <!--header-->

  <div id="nav">
    <a href="index.html">Etusivu</a>
    <br>
    <a href="page1.html">Teltat</a>
    <br>
    <a href="page2.html">Palvelut</a>
    <br>
    <a href="page3.html">Yhteistiedot</a>
    <br>
  </div>

  <div id="section">
    <a href="page2.html"><h1>Pro</h1></a>
    <div class="main_block">

      <div class="inner_block">
        <img src=Grafik/talt.png>
      </div>

      <div class="inner_block">
        <img src=Grafik/talt.png>
      </div>

    </div>
    <!--mainblock-->
  </div>

  <div id="footer">
    <h3>POP-UP TELTTOJEN YKKÖNEN </h3>
  </div>
  <!--footer-->
</div>
<!--container-->

Answer 3

检查该 jsfiddle 是否符合您的期望。如果不解释你的问题。

 <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:189px;
    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{
  width:45%;
  display:inline-block;
}

#section{
  text-align:center;
}
</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="page1.html">Teltat</a><br>
<a href="page2.html">Palvelut</a><br>
<a href="page3.html">Yhteistiedot</a><br>
</div>

<div id="section">
<a href="page2.html"><h1>Pro</h1></a>
<div class="main_block">

    <div class="inner_block">
        <img src=Grafik/talt.png>
    </div>

    <div class="inner_block">
        <img src=Grafik/talt.png >
    </div>    

</div><!--mainblock-->
</div>

<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
 </div><!--footer-->
</div> <!--container-->
</body>

Answer 4

更简单的解决方案，将 inline-block 属性用于图像封装器，并使用类似的 width 用于图像和封装器：

.inner_block {
  display: inline-block;
  text-align: center;
  width: 100px;
}

img {
  width: 100px;
}

jsfiddle-link

如何在 HTML 中将两张图片与上面的文字并排放置

How to place two images side by side with text above in HTML

html

css

webpage