Bildfehler mit CSS

Question

Ich versuche, meine Bilder zu verschieben, um in die roten Linien der Abschnitte, die ich mit CSS gemacht habe, zu passen. Ich kann einfach nicht herausfinden, wie es geht.

mein HTML:

 <!-- Your code goes here --> 
    <div class="container"> 

    <section class="left"> 
    <h1>Photo Gallery</h1> 
    <article> 
    <h4>World Capitals</h4> 
    <p>A capital city is a city or town, specified by law or constitution, by  the government of a country, or 
    part of a country, such as a state, province, or county. It generally serves as the location of the government's central meeting 
    place and offices. Most of the country's leaders and officials work in the capital city</p> 
    </article> 

    <article class="divider"> 
    <h4>Thailand</h4> 
    <figure> 
      <figcaption> 
       Bangkok 
      </figcaption> 
      <img src="Bangkok.jpg" alt="Capital of Thailand" title="Bangkok" /> 
     </figure> 
    <p> 
Thailand is a country on Southeast Asia’s Indochina peninsula known for tropical beaches, opulent royal palaces, 
ancient ruins and ornate temples displaying figures of Buddha, a revered symbol. In Bangkok, the capital, an 
ultramodern cityscape rises next to quiet canal and riverside communities. 
Commercial hubs such as Chinatown consist of labyrinthine alleys crammed with shophouses, markets and diners. 
    </p> 
    </article> 

    <article class="divider"> 
    <h4>Egypt</h4> 
    <figure> 
      <figcaption> 
       Cairo 
      </figcaption> 
      <img src="Cairo.jpg" alt="Capital of Egypt" title="Cairo" /> 
     </figure> 
    <p> 
Egypt, a country linking northeast Africa with the Middle East, dates to the time of the pharaohs. 
Millennia-old monuments still sit along the fertile Nile River Valley, including the colossal Pyramids and Sphinx at 
Giza and the hieroglyph-lined Karnak Temple and Valley of the Kings tombs in Luxor. 
    </p> 
    <a href="#">Top</a> 
    </article> 

CSS verwendet:

section { 
    margin-left: 150px; 
    border: 3px solid red; 
} 

.divider { 
    border-top: 3px solid red; 
} 

img{ 
     float: right; 
     margin: auto; 
} 

Ich möchte nur die Bilder in ihrem eigenen Artikelabschnitt erscheinen und nicht in der Mitte der Linien ich sie zu trennen. Jede Hilfe wäre wunderbar! Vielen Dank!

Answer 1

Ich glaube, du bist für so etwas gehen:

section { 
 
    margin-left: 150px; 
 
    border: 3px solid red; 
 
} 
 

 
.divider { 
 
    border-top: 3px solid red; 
 
} 
 

 
.divider:before, 
 
.divider:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 

 
.divider:after { 
 
    clear: both; 
 
} 
 

 
figure, img { 
 
    float: right; 
 
    margin: auto; 
 
    width: 100%; 
 
} 
 

 
h1, h4, p, a, figure { 
 
    margin: 10px; 
 
} 
 

 
figure { 
 
    max-width: 50%; 
 
    margin-top: -20px; 
 
}

<div class="container"> 
 
    <section class="left"> 
 
     <h1>Photo Gallery</h1> 
 
     <article> 
 
      <h4>World Capitals</h4> 
 
      <p> 
 
       A capital city is a city or town, specified by law or constitution, 
 
       by the government of a country, or part of a country, such as a state, 
 
       province, or county. It generally serves as the location of the 
 
       government's central meeting place and offices. Most of the country's 
 
       leaders and officials work in the capital city 
 
      </p> 
 
     </article> 
 
     <article class="divider"> 
 
      <h4>Thailand</h4> 
 
      <figure> 
 
       <figcaption>Bangkok</figcaption> 
 
       <img src="http://www.seriouseats.com/images/2012/10/20121015-226179-best-dishes-thailand-bangkok.jpg" alt="Capital of Thailand" title="Bangkok" /> 
 
      </figure> 
 
      <p> 
 
       Thailand is a country on Southeast Asia’s Indochina peninsula 
 
       known for tropical beaches, opulent royal palaces, ancient ruins and 
 
       ornate temples displaying figures of Buddha, a revered symbol. In 
 
       Bangkok, the capital, an ultramodern cityscape rises next to quiet 
 
       canal and riverside communities. Commercial hubs such as Chinatown 
 
       consist of labyrinthine alleys crammed with shophouses, markets and 
 
       diners. 
 
      </p> 
 
     </article> 
 
     <article class="divider"> 
 
      <h4>Egypt</h4> 
 
      <figure> 
 
       <figcaption>Cairo</figcaption> 
 
       <img src="http://cdn.ek.aero/english/images/Cairo_tcm233-2363745.jpg" alt="Capital of Egypt" title="Cairo" /> 
 
      </figure> 
 
      <p> 
 
       Egypt, a country linking northeast Africa with the Middle East, dates 
 
       to the time of the pharaohs. Millennia-old monuments still sit along 
 
       the fertile Nile River Valley, including the colossal Pyramids and 
 
       Sphinx at Giza and the hieroglyph-lined Karnak Temple and Valley of 
 
       the Kings tombs in Luxor. 
 
      </p> 
 
      <a href="#">Top</a> 
 
     </article> 
 
    </section> 
 
</div>

(siehe auch this Fiddle)