Início / user-1065145

Denis Kulagin's questions

Martin Hope
Denis Kulagin
Asked: 2025-02-12 15:03:52 +0800 CST
  • 6

Tenho um bloco que consiste em uma imagem com texto em volta dela:

* * * T T T
* * * T T T
* * * T T T
T T T T T T

H H H

Onde *representa a imagem, Trepresenta o texto e Hé um cabeçalho que segue o bloco de texto/imagem.

Preciso de regras CSS que satisfaçam ambas as condições:

  1. O texto deve flutuar ao redor da imagem, enquanto a imagem em si tem preenchimento direito e inferior para evitar que o texto fique grudado nela.
  2. O bloco de texto/imagem não deve ter margem inferior ou preenchimento extra, ou pelo menos ter um que possa ser recolhido, para que o espaçamento entre H e o bloco de texto/imagem seja controlado somente pela margem superior de H.
  3. Isso funciona bem quando há texto suficiente para exceder a altura da imagem. No entanto, não consigo resolver o problema quando não há texto suficiente:
* * * T T T
* * * T T T
* * * T T T
* * *  
* * *  
    
H H H

Nesse caso, a margem da imagem não é recolhida e, em vez disso, é adicionada à margem superior de H, o que cria espaço extra indesejado.

Como posso alcançar o comportamento desejado?

Aqui está um exemplo que demonstra o problema:

.container {
  max-width: 600px;
  margin-bottom: 30px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  display: block;
}

.float-image {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 150px;
  height: auto;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}

.header {
  margin-top: 30px;
}
<div class="container">
  <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
  <p>
    This is an example of an image floated to the left with text wrapping around it.

  </p>
</div>

<h3 class="header">Header</h3>

html