登录 | 注册 | FAQ
Anonymous

Colocar imagem lado a lado

+ 发表回复

3 篇帖子 分页: 1 / 1


Colocar imagem lado a lado

jeovane » 周一 11月 07, 2011 1:42 pm

Estou começando agora a aprender CSS e deparei-me com seguinte situação:
Quero colocar dentro de uma DIV quatro imagens sendo que 2 em cima e 2 em baixo mas do mesmo lado com um pequeno texto abaixo de cada uma delas. Pra ficar melhor o entendimento é como se fosse um quadrado com quatro fotos dentro.
Alguém poderia dar-me dicas?

附件

  1. modelo.jpg (13.83 KiB) 被下载 2676 次
    Seria mais ou menos assim o que desejo.

头像

jeovane

  • 帖子: 1
  • 注册: 周一 11月 07, 2011 1:25 pm

Re: Colocar imagem lado a lado

vcamargo » 周三 11月 09, 2011 4:50 pm

Oi, jeovane, você pode aprender sobre imagens e legendas aqui: http://maujor.com/w3ctuto/figcap.html
头像

vcamargo

  • 帖子: 4
  • 注册: 周二 10月 25, 2011 5:37 pm

Re: Colocar imagem lado a lado

atik » 周五 11月 11, 2011 7:20 pm

Você pode usar esse código para este problema. Basta modificar, quando necessário.

代码: 全选
<html>
    <head>
        <title>Four divs</title>
        <style>
            #contenet {
                width: 600px;
                margin: 0 auto;
                padding: 0;
                overflow: hidden;
            }
            .box {
                width: 200px;
                float: left;
                margin-right: 25px;
                overflow: hidden;
            }
            .small_box {
                border: 1px solid green;
                background: red;
                width: 200px;
                height: 200px;
                margin-bottom: 20px;
            }
        </style>

    </head>
    <body>
        <div id="contenet">
            <div class="box">
                <div class="small_box">
                   
                </div>
                <p>This is a small box</p>
            </div>
         <div class="box">
                <div class="small_box">
                   
                </div>
                <p>This is a small box</p>
            </div>
         <div class="box">
                <div class="small_box">
                   
                </div>
                <p>This is a small box</p>
            </div>
         <div class="box">
                <div class="small_box">
                   
                </div>
                <p>This is a small box</p>
            </div>
        </div>
    </body>
</html>
头像

atik

  • 帖子: 471
  • 注册: 周一 10月 17, 2011 4:55 pm


+ 发表回复

分页: 1 / 1