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文字环绕图像

回答

相关问题