Como alinhar imagem ao lado de imagem

Stack Overflow em Português Asked by Luan pedro on December 19, 2020

Estou tentando colocar uma imagem ao lado de outra, porém:

Eu quero que fique ao lado da imagem cinza, assim:

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

css3 html5

3 Answers

Também pode fazer uso da propriedade flex do css Segue exemplo:

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

Answered by lazyFox on December 19, 2020

Imagens são automaticamente colocadas ao lado da outra em default, exemplo...

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

caso queira redimensiona-las use width(largura) e height(altura).

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

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

Answered by Felipe Duarte on December 19, 2020

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

Pode fazer assim

EDIT: Copia e cola esse codigo e ve se funciona

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

Answered by Rafael Augusto on December 19, 2020

Como alinhar imagem ao lado de imagem

3 Answers

Add your own answers!

Ask a Question