html - 文本不会环绕图像，需要图像与文本顶部对齐

Question

我正在拔掉稀疏的头发。我不知道我做错了什么。我无法让所有文本都显示在图像左侧。我曾尝试将图形放在环绕 div 的外部和内部，但无济于事。

缩写的 HTML:

        <div id="home_article_container" class="fluid">

            <div id="home_article" class="fluid">                            
                <h1>How It Works
                </h1>                                      
                <h2>Truck waste
                </h2>                            
                <figure class="images">                            
                     <img src="#" width="664" height="1000" alt="Overhead view" 
                     />                                      
                     <figcaption>The plant
                     </figcaption>                                
                </figure>                                                                              
                <p>Blah Blah Blah
                </p>                            
                <h2>Receiving building
                </h2>                            
                <p>
                Blah Blah Blah
                </p>                            
            </div> <!-- home_article-->                        

        </div> <!--home_article_container-->

CSS:

#home_article {
    background-color: #FFFFFF;
    margin: 0;
    padding: 0 55px 89px 55px;
    float: left;
    width: auto;
    display: inline-block;
}

.images {
    display: inline-block;
    margin:0 auto;
    padding: 0 0 2em 34px;
    vertical-align:text-top;
    float: right;
}

.images img {
    height: 21em;
    width: auto;
}

figcaption {
    font-family: "ff-meta-web-pro", sans-serif;
    text-align: left;
    color: hsla(0,0%,18%,1.00);
    font-size: .75em;
    font-weight: 400;
    line-height: .5em;
    padding-top: .5em;
    padding-bottom: .5em;
}

Answer 1

给你: JSFiddle

您所要做的就是将其添加到 CSS 中:

h1,h2,p {
padding-left: 30px; }

现在您所有的文字都与图像整齐地对齐了。您也可以尝试其他东西，例如百分比、边距……等等……

有关如何在 css 中使用填充的更多信息:http://w3schools.com/css/css_padding.asp