How to align image next to image

Question

How to align image next to image

Asked 7 years, 2 months ago

Viewed 3,219 times

2

I’m trying to put one image next to another, but:

I want you to stand next to the gray image, like this:

html:

<div class="ads01">
   <img src="img/160x600.png"/>
</div>

Css:

#ads01{
   text-align: left;
   width: 160px;
   border-style: solid;
   border-width: 5px;
   border-radius: 5px;
}

3 answers

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.

by lazyFox • **3,227** points · Answer 1 · 2018-04-18T18:04:44+00:00

You can also make use of the property flex of css Following example:

.conteudo {
  display: flex;
  justify-content: center;
}

.conteudo > img {
  height: 100px;
}

<div class="conteudo">

  	<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fmickirose.files.wordpress.com%2F2014%2F11%2Ftest-icon.jpg&f=1"/>
    <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fmickirose.files.wordpress.com%2F2014%2F11%2Ftest-icon.jpg&f=1"/>

</div>

by Rafael Augusto • **4,027** points · Answer 2 · 2017-09-29T17:39:42+00:00

.ads01{

  float: left;
  width: 50px;
}

img{
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
<div class="ads01">
   <img src="https://oblogmenoslidodomundo.files.wordpress.com/2014/10/quadrado.jpg"/>
</div>
  
  <div class="ads01">
   <img src="https://oblogmenoslidodomundo.files.wordpress.com/2014/10/quadrado.jpg"/>
</div>
</body>
</html>

You can do it like this

EDIT: Copy and paste this code and see if it works

<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link type="text/css" rel="stylesheet" href="config/materialize.min.css?5705"  media="screen,projection"/>
      <link type="text/css" rel="stylesheet" href="config/easy.css?4424"  media="screen,projection"/>
      <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
      <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon"/>
      <title>test</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="config/materialize.min.js"></script>
      <script type="text/javascript" src="config/easy.js?7091"></script>
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    </body>
  </html>

<nav class="nav-extended" style="background:#52472A;">
<div class="nav-wrapper" style="height:240px;background: url(img/header.png);border-bottom: 4px solid rgba(0,0,0,0.1);">
</div>
</nav>
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Início</span></a></li>
   <li><a href='#'><span>Sobre nós</span></a></li>
   <li><a href='#'><span>Regras</span></a></li>
</ul>
</div>

<br><br>
<center><div style="width:800px;height:610px;">
    <div style="float: left; width: 100px; height: 200px; background: black;"></div>
    <div style="width: calc(100% - 300px);height:100%; float: left;" id='chauger'>
        <object id="swf1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="Transformice" align="middle">
        <param name="allowScriptAccess" value="always" />
        <param name="movie" value="swf.swf" />
        <param name="menu" value="true" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#6A7495" />
        <embed id="swf2" src="Swf.swf" wmode="direct" menu="true" quality="high" bgcolor="#6A7495" width="100%" height="100%" name="Transformice" align="middle" swLiveConnect="true" allowFullScreen="true" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>
    </div>
</div></center>

<div class="ads01">
<img src="img/160x600.png"/>
</div>

<center>
<div class="container">
<div class="grid_15" style="width:800px;">
    <div class="contentBox" style="padding:50px;">
    <small style="font-size:26px;">.</small><br>
    <small style="font-size:14px;">.</small>
    </center>
</div></div></div></div>

by Felipe Duarte • **6,284** points · Answer 3 · 2017-09-29T17:47:26+00:00

Images are automatically placed next to each other in default, example...

<div>
  <img src="https://fakeimg.pl/100/">
  <img src="https://fakeimg.pl/100/">
<div>

if you want to resize them use width(width) and height(height).

div img:nth-child(1){
  height: 200px;
}

<div>
  <img src="https://fakeimg.pl/100/">
  <img src="https://fakeimg.pl/100/">
<div>