0

Fiz isto até agora:

*{margin:0;padding:0;}

.container{
    width:700px;
}
.image img{
    margin-right:15px;
    float:left;
    width: 300px;
    height: 225px;
    object-fit: cover;
    position: relative;
    background:#333;
}

.container p{
    font-size:20px;
    width: 370px;
    text-align: justify;
    display: inline-block;
    vertical-align: top;
}

.comment-box{
    height:50px;
    width: 300px;
    line-height: 2.3em;
    font-weight: 700;
    background: #D8DFE3;
    text-align: center; 
}
<div class="container">
    <div class="image">
        <img src="">
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <div class="comment-box">Comentários</div>
</div>

Eu gostaria que o elemento .comment-box não fica-se separado da foto, imagem do que estou tentando alcançar:

inserir a descrição da imagem aqui

5
  • 3
    Seu fiddle tá funcionando.
    – Marconi
    Commented 23/10/2015 às 16:52
  • Não vejo problema na estrutura, mas se você está começando em html e css sugiro já a dar uma olhada em frameworks css, um popular e bem facil é o bootstrap, ele te ajuda nessas horas, para não fazer tudo na mão
    – jbrunoxd
    Commented 23/10/2015 às 16:58
  • Mas o box de comentários fica com uma margem indesejada.
    – Pedro M.
    Commented 23/10/2015 às 17:02
  • 2
    Relacionado pt.stackoverflow.com/questions/91606/… Commented 23/10/2015 às 19:22
  • Bom dia a todos, apesar da pergunta do Pedro estar mal formulada e não explica qual o real problema (suposta margem abaixo da imagem), votei por deixar aberta pois esta pergunta não é uma duplicata de pt.stackoverflow.com/q/91606/3635, no entanto Pedro sugiro que explique melhor o problema da proxima vez, pois suas perguntas poderão ser fechadas por outros motivos.
    – Syzoth
    Commented 24/10/2015 às 12:52

2 Respostas 2

3

Você pode fazer da seguinte forma utilizando CSS e aninhamento HTML:

Adicione a imagem e o texto "comentário" dentro de um mesmo container por exemplo uma <div> no HTML e depois utilize o float na mesma para que o texto fique na lateral.

Exemplo:

/* RESET */
* {
  margin: 0;
  padding: 0;
}


div {
  float: left;
}
h2 {
  background-color: #333;
  color: #fff;
  font-size: 14px;
  padding: 10px 0;
  margin-right: 10px;
  text-align: center;
  text-transform: uppercase;
  width: 150px;
}
img {
  background-color: gray;
  display: block;
  height: 100px;
  width: 150px;
}
<div>
  <img src="">
  <h2>Comentários</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed erat at nisl vestibulum mattis egestas non sem. Vestibulum a neque posuere, porttitor justo ut, dignissim leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel nisl at
  leo maximus iaculis vitae eu justo. Nam euismod, sapien ut gravida pulvinar, elit libero dignissim justo, et aliquam lacus magna vel metus. Vestibulum tristique dolor at lectus sodales, ut pulvinar ligula pulvinar.</p>

Dessa maneira você não precisa delimitar alturas e o conteúdo pode fluir normalmente caso seu conteúdo seja responsivo.

Recomendo também, utilizar uma técnica chamada clearfix para "limpar" o float.


OBS.: Pergunta Similar.

2
  • Exatamente, o CSS não faz todo o serviço, o correto é mesmo ajustar o HTML. +1 pela resposta!
    – Syzoth
    Commented 24/10/2015 às 12:50
  • Obrigado! Ajudou bastante
    – Pedro M.
    Commented 26/10/2015 às 20:57
1

você pode deixar a altura do texto sendo a mesma da imagem adicionando height: 225px;

Veja funcionando.

*{margin:0;padding:0;}
.container{
    width:700px;
}
.image img{
    margin-right:15px;
    float:left;
    width: 300px;
    height: 225px;
    object-fit: cover;
    position: relative;
    background:#333;
}
.container p{
    font-size:20px;
    width: 370px;
    text-align: justify;
    display: inline-block;
    vertical-align: top;
    height: 225px;
}

.comment-box{
    height:50px;
    width: 300px;
    line-height: 2.3em;
    font-weight: 700;
    background: #D8DFE3;
    text-align: center; 
}
<body>
<div class="container">
  <div class="image">
    <img src="">
  </div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<div class="comment-box">Comentários</div>
</div>

    
          
    

mas claro que não é uma solução 100% eficaz, pode ocasionar mais problemas no futuro, estabilidade mesmo só com um framework css

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .