如何将图像与文字对齐？

Question

I'm supposed to reproduce the image below, and I was doing great so far, but can't seem to align my images well, and can't set up the top menu properly.

I should also be able to "paint" the image background green, but have no idea how to do so.

How can I achieve that?

 body { background-color: #dff0d8; } h1 { background-color: green; } #outros { background-color: black; } #texto1 { float: left; width: 30%; } #texto2 { float: left; width: 30%; } #texto3 { float: left; width: 30%; } img { border-radius: 10%; } #preto { background-color: green; } 

 <link href="//www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> <h2 id="outros"> <font color="white"> <div id="preto">Home</div>Museus <br/> Monumentos <br/> Restaurantes </font> </h2> <h1> <font color="white"> A cidade de Lisboa </font> </h1> <div id="texto1"> <h3> Introdução </h3> <p> Lisboa GCTE é a capital de Portugal ea cidade mais populosa do país. Tem uma população de 506 892 habitantes, dentro dos seus limites administrativos. Na Área Metropolitana de Lisboa, residem 2 821 697 pessoas (2011), sendo por isso a maior e mais populosa área metropolitana do país. Lisboa é o centro político de Portugal, sede do Governo e da residência do chefe de Estado. É o "farol da lusofonia" (Daus): a Comunidade dos Países de Língua Portuguesa (CPLP) tem a sua sede na cidade. É ainda a capital mais a ocidente do continente europeu na costa atlântica. </p> </div> <div id="texto2"> <h3> Globalidade </h3> <p>Lisboa é considerada como cidade global devido à sua importância em aspectos financeiros, comerciais, mediáticos, artísticos, educacionais e turísticos. É um dos principais centros económicos do continente europeu, graças a um progresso financeiro crescente favorecido pelo maior porto de contentores da costa atlântica da Europa e mais recentemente pelo Aeroporto Humberto Delgado, que recebe mais de 20 milhões de passageiros anualmente (2015). Lisboa conta com uma rede de auto-estradas e um sistema de ferrovias de alta velocidade (Alfa Pendular), que liga as principais cidades portuguesas à capital. <br/> A cidade é a sétima mais visitada do sul da Europa, depois de Istambul, Roma, Barcelona, Madrid, Atenas e Milão, com 1 740 000 de turistas em 2009, tendo em 2014 ultrapassado a marca dos 3,35 milhões. A nível global, Lisboa foi a 35.ª cidade com maior destino turístico em 2015, cerca de 4 milhões de visitantes. Em 2015, foi considerada a 11.ª cidade turística mais popular, à frente de Madrid, Rio de Janeiro, Berlim e Barcelona. </p> </div> <div id="texto3"> <h3> Riqueza </h3> <p> A região de Lisboa é a mais rica do país, com um PIB PPC per capita de 26 100 euros (4,7% maior do que o PIB per capita médio da União Europeia). A sua área metropolitana é a vigésima mais rica do continente, com um PIB-PPC no valor de 58 mil milhões de euros, o que equivale a cerca de 35% do PIB-PPC total do país. Lisboa ocupa o 122.º lugar entre as cidades com maiores receitas brutas do mundo. </br> A maioria das sedes das multinacionais instaladas em Portugal encontram-se na região de Lisboa, a nona cidade do mundo com maior número de conferências internacionais. </p> </div> <div id="zonafoto"> <div id="img1" style="float:left"> <img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg/800px-Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg width=479px height=330px></div> <div id="img2" style="float:center"> <img src=http://municipiosefreguesias.pt/files/20141111021430_vascodagama.jpg width=479px height=330px></div> <div id="img3" style="float:right"> <img src=http://turismo.culturamix.com/blog/wp-content/gallery/praca-do-comercio/praca-do-comercio-11.jpg width=479px height=330px></div> </div> 

Answer 1

For the menu try this:

HTML:

<div id="outros">  
    <ul>
      <li id="preto"><h2>Home</h2></li>
      <li><h2>Museus</h2></li>
      <li><h2>Monumentos</h2></li>
      <li><h2>Restaurantes</h2></li>
    </ul>
</div>

CSS:

#outros { 
  background-color: black;
  color: white;   
  margin-left: -40px;
}
#outros li {
  display: inline-block;
  padding: 5px 20px;
}