文字不會環繞圖像，需要圖像對齊文字頂部

我正在拉我的頭髮稀疏。我無法弄清楚我做錯了什麼。我無法讓所有文字都流到圖片的左側。我試圖把外面的人物放在環繞的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; 
}

來源

2013-11-22 BOB3000

也許#home_article {寬度：100％;}將幫助您？我不確定你是否想要這個？ –

不是我在找什麼。 – BOB3000

在這裏你去： JSFiddle

所有你需要做的就是將其添加到CSS：

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

而你所有的文字現在整齊地與圖像對齊。你可以嘗試其他的東西太像百分比，利潤...等等....

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

來源

2013-11-22 22:24:55 tinthetub

你，但這沒有奏效。 – BOB3000

你是否檢查過小提琴：http://jsfiddle.net/p6w7B/或者那不是你要找的東西？ – tinthetub

我正在尋找將段落和h2文字移到左側並將圖像移到右側。我也希望圖像排列在paragrah文本的頂部。 – BOB3000

文字不會環繞圖像，需要圖像對齊文字頂部

回答

相關問題