Как разместить два изображения рядом с текстом выше в HTML

Question

Я пытаюсь разместить два изображения в html (css) рядом с небольшим отступом, чтобы получить пространство между ними, с некоторым текстом над двумя , Это было бы в разделе «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

Более простое решение, чтобы использовать inline-block свойство для изображений wrapers и аналогичные width для изображений и wrapers:

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

img { 
    width: 100px; 
} 

jsfiddle-link

Answer 2

это должно решить вашу проблему.

.inner_block{ 
    float: left; 
} 

Answer 3

Ваши изображения находятся внутри 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 4

Проверьте, что jsfiddle соответствует вашим ожиданиям. Если не объясните свою проблему.

<style> 
 

 
body{margin:0; 
 
\t padding:0; 
 
\t } 
 
#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; 
 
    
 
\t 
 
} 
 
#container { 
 
\t margin:auto; 
 
\t width:900px; 
 
\t text-align:left; 
 
\t 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> 
 
\t <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> 
 
\t </div><!--footer--> 
 
</div> <!--container--> 
 
</body>