Aligning image next to image

Question

Aligning image next to image

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I'm trying to put one image next to another, though:

Iwantittobenexttothegrayimage,likethis:

html:

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

Css:

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

html5 css3

asked by anonymous 29.09.2017 / 19:31

3 answers

How to select an option in select less laborious way? err_too_many_redirects only in production environment

score 0 · Answer 1

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

<div>
  <img src="https://fakeimg.pl/100/"><imgsrc="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/"><imgsrc="https://fakeimg.pl/100/">
<div>

score 0 · Answer 2

.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><divclass="ads01">
   <img src="https://oblogmenoslidodomundo.files.wordpress.com/2014/10/quadrado.jpg"/></div></body></html>

Youcandothis

EDIT:Copyandpastethiscodeandseeifitworks

<!DOCTYPEhtml><html><head><metahttp-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><scripttype="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><scriptsrc="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>

score 0 · Answer 3

You can also use the flex property of css Here's an 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"/><imgsrc="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fmickirose.files.wordpress.com%2F2014%2F11%2Ftest-icon.jpg&f=1"/>

</div>