Question

我正在尝试将两个图像放在html（带有css）中并用一个小填充来获得两者之间的空格，一些文本位于两者之上。这将在＆＃34; section div＆＃34;我设法让他们并排，但所有的工作都丢失了，我没有设法将文字放在图像上方。任何帮助表示赞赏！谢谢！

＆＃13;

#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;
}

＆＃13;

<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-->

＆＃13;

jsFiddle

Answer 1

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

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

img {
  width: 100px;
}

jsfiddle-link

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是否符合您的期望。如果没有解释你的问题。

＆＃13;

 <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>

＆＃13;

 <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>

＆＃13;

Answer 4

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

.inner_block{
   float: left;
 }

如何在HTML

4 个答案: