HTML文字环绕图像

Question

I am making a website using the flexible box model. I am trying to have the text be aligned to the right of the image, and then below the image. I tried the Float:right/left and the align="left/right" and they just make the image disappear. Is this because of the flexible box model? Here is the source code. The article is an example im using from the World of Tanks website.

<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 why some of the article was separated from the code. Here is the 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;

}

Thanks for the help. Sorry for the bad formatting, this is my first post here

Answer 1

The webkit box is what is throwing it off...semantically putting it inside the article is the right way to go, though.

This works fine: 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;

}

Answer 2

I think you forgot the closing </div> of your info-p div, and then you can just add float: left to it, and it works.

See the demo .