How to align paragraphs next to the image in HTML and CSS? [duplicate]

Navigation
0

I'm having a test on .html and .css and wanted to align the text on the image side, how can I do this? I wanted to put it where the arrow shows.

HTMLcode

<!doctypehtml><html><head><title></title><metacharset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilof.css"/>

  </head>
        <body>
                <div id="wrap">
                    <header>
                        <h1 align="center">Fsociety Page</h1>
                        <div id="menu">
                            <nav>
                                <ul>
                                    <li><a href="link-img.html" alt="fsociety">Inicio</a></li>
                                    <li><a href="formularios.html">Formulário</a></li>
                                    <li><a href="">Sobre</a></li>
                                </ul>
                            </nav>
                        </div>
                    </header>
                </div>
                <h2 align="center">Mr Robot Fans</h2>   
                    <p> Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste </p>
                    <p> Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste 
                    </p>
                <figure id="img">
                    <img src="img/fsociety.png" alt="fsociety"/>
                    <figcaption><strong>Fsociedade</strong></figcaption>
                </figure>                   
        </body>
            </html>
    
asked by anonymous 07.12.2016 / 03:41

2 answers

0

Just give float: left in the image 

<figure id="img" style="float: left">
    <img src="img/fsociety.png" alt="fsociety"/>
    <figcaption><strong>Fsociedade</strong></figcaption>
</figure>  

<h2 align="center">Mr Robot Fans</h2>   
<p> Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste </p>
<p> Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste 
</p>
    
07.12.2016 / 14:08
0

Make a new div and place the image and text. Format the div 

.div
{
  width: 100%; 
  height: 100px;/* Aqui você pode alterar */
  display: flex;
}
.txt{
  /* A classe do texto */
  float: right;
}
    
18.12.2016 / 15:32
How to redirect to the same position of the object after the update You only register once and then