the Float property of CSS, there is left,right.
So, what if I want the picture to float in the middle? Do you have any float:middle?
seems to be no le.
the latest CSS3 column properties (http://www.w3.org/TR/css3-multicol/) allows the text compartment, and then the picture left floating right, in order to achieve the image in the middle of the "illusion."
How to achieve "text wrapping picture" overbearing effect?!! (although it feels like 2, no UI designer will design a Web page like this.) But I think this kind of typesetting is very interesting oh ~)
answer is, with Dynamic div ~
the text into 4 pieces, around the picture. The size of the picture and the size of the div are specified beforehand. Then use JS to calculate how many words each div displays.
So, even if only Zofa right float, can also achieve the effect of text wrapping picture ~
Effect:
All source code:
copy code code as follows:
<! DOCTYPE html>
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.10.0.min.js" ></script>
<title> Text wrapping picture </title>
<style>
html,body{
line-height:20px;
}
. img{
Background:url ("http://a4.att.hudong.com/00/27/01300000164784121809279645121.jpg");
width:300px;
height:200px;
Position:absolute;
left:270px;
top:210px;
/* border:1px solid #ccc; * *
}
. m1{
width:840px;
height:200px;
Overflow:hidden;
}
. m2{
width:260px;
height:230px;
Position:absolute;
left:0px;
top:200px;
Overflow:hidden;
}
. m3{
width:260px;
height:230px;
Position:absolute;
left:580px;
top:200px;
}
. m4{
Position:absolute;
left:0px;
top:422px;
width:840px;
height:200px
}
. lbl{
width:840px;
position:relative;
Clear:both;
}
. c{
Display:none;
}
p{
padding:0px;
margin:0px;
}
</style>
</head>
<div class= "LbL Clearx" >
<div class= "M1 Clearx" ></div>
<div class= "m2 clearx" ></div>
<div class= "M3 Clearx" ></div>
<div class= "M4 Clearx" ></div>
<div class= "img" ></div>
</div>
<div class= "C" >
In 1815, when Napoleon was exiled Elba, I. D', a young and successful merchant sailor, Edmond Tantes, accepted the Captain's command at the death of Captain Liclere and returned to his hometown of Marseille to marry his fiancee Matis. Liclere, a Napoleon supporter, commanded Tang Tai Si to deliver two items, one for the Machel Bertrand on Elba, I. D', and one to send letters from the Elba, I. D' to a mysterious man living in Paris. The mysterious letter Tang Tai si two jealous of his friends and accused Tang Tai Si of treason on the advice of another friend. Marseille's chief prosecutor, Welford, despite his usual integrity and compassion for Tang Tai Si at the beginning, found that the mysterious addressee of the letter was his father, who, without investigation, sentenced Tang Tai Si to prison Chateau d ' for life in the sea, and at the same time smoked out the letters as evidence. During his 14 years in prison in Chateau d ', he became friends with Aber Falia, an old inmate who claimed to have a lot of treasure and tried to dig tunnels. Faria will teach Huttentesse of his life and inform Huttentesse of the treasure hidden in Christ Mountain before he dies. After Faria died in 1829, Tang Tai si dressed Faria's corpse and fled Chateau d ', he was rescued by a smuggler, and after working with a smuggler for a few months, he came to Monte Cristo, pretending to be injured, and persuading the smuggler to put him in Monte Cristo for the time being, to go to the treasure's hiding place. After finding the treasure, Tang Tai Si returned to his hometown of Marseille and learned that his father was poor and dead, that he built a ship, put the remaining treasures on board, and then bought the title of Christ Hill and Earl to the Tuscany government. Back in Marseille, Tang Tai Si began to plan his revenge, but before that he helped some of the people who had helped him before he went to jail. In 1815, when Napoleon was exiled Elba, I. D', a young and successful merchant sailor, Edmond Tantes, accepted the Captain's command at the death of Captain Liclere and returned to his hometown of Marseille to marry his fiancee Matis. Liclere, a Napoleon supporter, commanded Tang Tai Si to deliver two items, one for the Machel Bertrand on Elba, I. D', and one to send letters from the Elba, I. D' to a mysterious man living in Paris. The mysterious letter Tang Tai si two jealous of his friends and accused Tang Tai Si of treason on the advice of another friend. Marseille's chief prosecutor, Welford, despite his usual integrity and compassion for Tang Tai Si at the beginning, found that the mysterious addressee of the letter was his father, who, without investigation, sentenced Tang Tai Si to prison Chateau d ' for life in the sea, and at the same time smoked out the letters as evidence. During his 14 years in prison in Chateau d ', he became friends with Aber Falia, an old inmate who claimed to have a lot of treasure and tried to dig tunnels. Faria will teach Huttentesse of his life and inform Huttentesse of the treasure hidden in Christ Mountain before he dies. After the death of Faria in 1829, Tang Tai si dressed up fariaThe corpse fled the Chateau d ' and was rescued by a smuggler, and after working with the smuggler for several months, he came to Monte Cristo, pretending to be injured, and persuaded the smuggler to put him in Monte Cristo for a while, while he went to the treasure's hiding place. After finding the treasure, Tang Tai Si returned to his hometown of Marseille and learned that his father was poor and dead, that he built a ship, put the remaining treasures on board, and then bought the title of Christ Hill and Earl to the Tuscany government. Back in Marseille, Tang Tai Si began to plan his revenge, but before that he helped some of the people who had helped him before he went to jail.
</div>
<body>
</body>
<script type= "Text/javascript" >
var c = $ (". C"). html ();
var length = 5
for (var k = 1; k < length; k++) {
C = Set (C,k,length-1 = = k);
}
function Set (VALUE,INDEX,FLG) {
var val = "";
var v = null;
var element = $ (". M" + index);
element.html ("<p>" + value + "</p>");
var element2 = element.find ("P");
if (FLG) {
return "";
}
while (Element.height () < Element2.height ()) {
v = element2.html ();
v = v.substring (0,v.length-1);
element2.html (v);
}
val = value.replace (New RegExp ("^" + V), "");
return Val;
}
</script>
</html>
