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

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

1 个答案: