Question

我正在尝试移动我的图像以适应我用css制作的部分的红线。我似乎无法弄明白该怎么做。

我的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：

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

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

 img{
      float: right;
      margin: auto;
}

我只是希望图像出现在他们自己的文章部分中，而不是在我将它们分开的行的中间。任何帮助都会很精彩！谢谢！

Answer 1

我认为你正在寻找这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

（另见this Fiddle）

用css造成图像问题

1 个答案: