Question

我的目标是将两张图片并排放在其下面，文字为described here。

无法更改HTML。

我尝试了很多东西，比如margin，display和float，还没有做过什么。

到目前为止我所拥有的：

＆＃13;

/*stildeklarationer för rubriker */

body {
  margin-bottom: 496px !important;
}
h1 {
  font-size: 30px;
  letter-spacing: 4px;
  color: blue;
  font-family: helvetica;
  font-weight: normal;
  margin: auto;
  border: 2px;
  text-align: center;
  border-style: solid;
  border-color: #000000
}
h2 {
  font-size: 20px;
  letter-spacing: 4px;
  color: #000000;
  font-family: helvetica;
  font-weight: normal;
}
/*stildeklarationer för bilder */

img {
  float: left;
  max-width: 260px;
  max-height: 480px;
  position: relative;
}
/*stildeklarationer för all text */

p {
  width: 50%;
  font-family: Verdana;
  color: #CCC;
  font-size: 13px;
  line-height: 20px;
  text-align: justify;
  background-color: white;
  color: black;
  border-style: solid;
  border-color: #000000
}
article section footer {
  float: left;
  clear: both;
  font-family: Verdana;
  color: #CCC;
  font-size: 10px;
  line-height: 16px;
  text-align: justify;
}
footer {
  clear: both;
  overflow: auto;
  font-family: Verdana;
  color: #CCC;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
#wrapper {
  width: 900px;
  margin: 0 auto;
  /*centrerar*/
  position: relative;
}

＆＃13;

<div id="wrapper">
  <header>
    <h1>Smakprov ur studieguiden för webbutveckling 2</h1>
  </header>
  <article>
    <section>
      <header>
        <h2>Om CSS</h2>
      </header>
      <img src="./Modul 2 - uppgift 2_files/W6GqEQ" alt="css3">
      <p>Vad CSS kan användas till har vi lärt oss i föregående kurs men vi kommer arbeta vidare med stilmallar i denna studieguide eftersom det är ett sätt att styra utseendet på hemsidan som ska användas. Inga hemsidor görs idag utan att använda just stilmallar
        och allt eftersom nya versioner av CSS släpps så förbättras möjligheterna och utbudet av funktioner som erbjuds.</p>
      <p>Den senaste versionen av CSS är då CSS3 och för att vi fullt ut ska kunna utnyttja denna version ska vi alltså använda HTML5. Glöm dock inte att webbdesign utvecklas hela tiden och det som är sanning idag behöver inte vara sanning imorgon</p>
      <p class="linktext">Här är ett <a href="http://www.youtube.com/watch?v=G1J5tSeNoeY">youtube-klipp</a> om CSS</p>
      <footer>Skrivet av Oscar Antbring den 12 juni 2013</footer>
    </section>
    <section>
      <header>
        <h2>Om märkspråk</h2>
      </header>
      <img src="./Modul 2 - uppgift 2_files/U7tltv" alt="html5">
      <p>Märkspråk – eller markup language – är ett sätt att med hjälp av olika textkoder ge direktiv till ett program (i vårt fall då en webbläsare) hur ett dokument ska presenteras och vilka funktioner som ska finnas. Som vi kommer ihåg från första kursen
        så finns flera olika sådana textkoder att använda – eller taggar som vi ofta kallar dem för. Det kan vara en tagg för att berätta för webbläsaren att vi vill presentera en hyperlänk, eller att vi ska presentera en bild exempelvis. Naturligtvis
        måste webbläsaren veta vad de olika koderna – eller taggarna – betyder. Det är därför som olika märkspråk (och versioner) finns och från föregående kurs kommer vi ihåg HTML 4.01 samt XHTML. Vilket märkspråk som används ska vi specificera i dokumentet
        så att webbläsaren vet vilka taggar som kan användas och vad de betyder</p>
      <p>När vi skapar en hemsida så specificerar vi en så kallad DOCTYPE som beskriver vilket typ av dokument som webbläsaren kan förvänta sig. Vi säger helt enkelt till webbläsaren – ”detta dokument är av typen HTML5, och då kan du förvänta dig dessa taggar
        och struktur”. Naturligtvis måste webbläsaren ha stöd för HTML5 så att programmet vet vad som ska göras med taggarna och deras egenskaper.Det är därför det är så viktigt att vi validerar koden så att vår kod stämmer överens med vad webbläsaren
        förväntar sig utifrån typen av dokument. Vi kommer återkomma till just validering av koden i sista modulen även om det redan tagits upp i första kursen – validera gärna kontinuerligt koden genom hela utvecklingsarbetet.</p>
      <p class="linktext">Här är en <a href="http://html5.silberman.nu/index.html">svensk artikel</a> som beskriver HTML5</p>
      <footer>Skrivet av Oscar Antbring den 11 juni 2013</footer>
    </section>
  </article>
  <footer>©Hermods</footer>
</div>

＆＃13;

Answer 1

如果您希望这些块并排，您可以尝试以下方法：

section {
   float: left;
   width: 50%;
}

如何制作专栏

1 个答案: