Html文字環繞圖像

我正在製作一個使用靈活盒子模型的網站。我試圖讓文本對齊到圖像的右側，然後在圖像的下面。我嘗試了Float：right/left和align =「left/right」，他們只是讓圖像消失。這是因爲靈活的盒子模型嗎？這是源代碼。這篇文章是一個使用坦克世界網站的例子。Html文字環繞圖像

<div id="content"> 
    <section id="section"> 
     <div id="title"> 
      <h1>This is the Title</h1> 
     </div> 
     <div id="info-p"> 
      <div id="photo"> 
       <img id="img" src="400x300.png"> 
      </div> 
     <article id="info"> 
      <p> 
       US Army tankers, by late March 1945, when the final surge into Germany began, were among the most savvy graduates of the school of war. They knew how to storm cities and deal with small groups of defenders in villages or at crossroads. They could slog through fortifications and run like the cavalry of old. By and large, they had worked out effective teamwork strategies with the infantry, tank destroyers, and artillery, even if still a bit ambivalent about their friends in the fighter-bombers above them. They had learned to beat better tanks and worked out a series of pragmatic technical solutions to problems ranging from communication to moving on ice. 

The German Army fought on like a body without a brain—OKW records show it was often a couple days behind developments on the battlefield, and headquarters at all levels had difficulty delivering orders to units that often existed only on paper. Lt. Gen. George Patton’s G-2 shop estimated that as of March 17, total German tank strength on the western front amounted to the equivalent of a single full-strength panzer division.1 As of March 31, the entire force of panzers and assault guns in Third Army’s sector was estimated at only 55 vehicles, all opposite XX Corps in the Fulda area.2 

Cornelius Ryan captured the essence of the final push: 「The race was on. Never in the history of warfare had so many men moved so fast. The speed of the Anglo-American offensive was contagious, and all along the front, the drive was taking on the proportions of a giant contest.」3 So fast, indeed; between April 24 and 30, the 737th Tank Battalion moved 520 miles.4 

The Ninth Army pounded in the direction of Berlin all the way to the Elbe River. Just to the south, First Army advanced to the Mulde River. Patton’s Third Army drove toward Czechoslovakia, and Seventh Army pushed through Bavaria toward the rumored Nazi National Redoubt in the Bavarian Alps and Austria.5 

The tankers rolled past columns of German POWs heading for the rear, often with no supervision.  Increasingly, displaced persons and released Allied POWs also appeared. 
      </p> 
     </article> 

    </section> 


</div>

IDK爲什麼有些文章是從代碼中分離出來的。這裏是CSS

#section{ 
font: 14px Trebuchet MS; 
} 
#title{ 
text-align:left; 
display:-webkit-box; 
-webkit-box-pack:left; 
padding:5px; 
margin:10px; 
} 
#info-p{ 
display:-webkit-box; 
-webkit-box-pack:left; 
padding:5px; 
margin:10px; 
} 
#photo{ 


} 
#info{ 
display:-webkit-box; 
-webkit-box-pack:left; 
-webkit-box-flex:1; 
padding:5px; 
margin:10px; 
max-width:800px; 

}

感謝您的幫助。對不起，格式不好，這是我的第一篇文章

來源

2014-10-28 Fusive

**這與Flexbox規格**無關。如果您希望文本環繞浮動元素（例如圖像），則文本和元素必須是兄弟。換句話說，您必須將圖像移動到'

'元素中，以便文本環繞它。 – Terry 2014-10-28 00:59:20

webkit框是什麼把它扔掉......語義上把它放在文章中是正確的路要走。

這工作得很好：http://jsfiddle.net/34u4bhkh/

#section{ 
font: 14px Trebuchet MS; 
} 
#title{ 
text-align:left; 
display:-webkit-box; 
-webkit-box-pack:left; 
padding:5px; 
margin:10px; 
} 
#info-p{ 
padding:5px; 
margin:10px; 
} 
#photo{ 
float:right; 
    margin-left:5px; 
    margin-bottom:5px; 

} 
#info{ 
padding:5px; 
margin:10px; 
max-width:800px; 

}

來源

2014-10-28 01:00:54 Aibrean

感謝您的幫助！ – Fusive 2014-10-28 01:15:39

@Fusive - 它看起來像您正在使用舊的Flexbox規格。 [這是瀏覽器支持列表]（http://caniuse.com/#feat=flexbox）。最新的瀏覽器（以及許多版本）支持新的Flexbox規範。 – misterManSam 2014-10-28 01:18:29

我知道......我從新波士頓的HTML 5教程學習，他們是從2011年（我認爲）。我需要學習更新的模型。有沒有什麼地方可以顯示過時的東西已經轉換成了什麼樣的東西，還是我必須從頭開始學習。編輯：感謝您的鏈接。 – Fusive 2014-10-28 01:22:43

我想你忘記了你的info-p div的收盤</div>，然後你可以再補充float: left它，和它的作品。

查看demo。

來源

2014-10-28 01:04:28 lapin

Html文字環繞圖像

回答

相關問題