html - 如何将图片与文字对齐？

Question

我应该重现下面的图像，到目前为止我做得很好，但似乎无法很好地对齐我的图像，也无法正确设置顶部菜单。

我也应该能够将图像背景“绘制”成绿色，但不知道该怎么做。

我怎样才能做到这一点？

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 e a 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

对于菜单试试这个:

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;
}