如何使文本環繞div或span元素？

Question

我希望能夠指定元素的寬度和高度，並讓文本環繞任何大小。例如，如果我想創建一個100×100像素的文本框，文本將進行調整並環繞它。

http://jsfiddle.net/qmhoa14j/1/

<span id="block">Why isn't this 100 px?</span> 
    <p> 
    Once peasant footwear, espadrilles have grown in popularity, especially in the Catalan region and the Basque countries, where many men and women wear them during the spring and summer months. Designer espadrilles are now widely available. They are usually manufactured in Spain and South Asia. Modern espadrilles are predominantly for women, though some men's shoes are made in this style. 
    The soles of espadrilles may be flat, platform, or wedge shaped made of natural fiber. Uppers may be made from nearly any substance and may have open or closed toes, open or closed backs, and can be slip-on or tied to the ankle with laces. Thousands of varieties of espadrilles can be found, from inexpensive bargain brands to high priced designer brands. 
    Espadrilles became fashionable in the USA in the 1940s. Lauren Bacall's character in the 1948 movieKey Largo wore ankle-laced espadrilles. 
    </p> 
    <p> 
    Wedge shaped espadrilles were first popularized by French fashion designer Yves Saint Laurent. At a trade fair in Paris in 1970, he came into contact with the Spanish espadrille manufacturer Castañer. Yves Saint Laurent had been looking in vain for months for someone to make him a wedge espadrille. Castañer managed to interpret Yves Saint Laurent's vision and the wedge espadrilles were an instant hit, influencing fashion even today. 
    The espadrille style was revived in the USA in the 1980s, due to the success of Miami Vice—the shoe was worn by the character Sonny Crockett (played by Don Johnson). In 2013 at luxury shoe stores in New York City, a pair of espadrilles could cost nearly $500.[3] 
    </p> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, laoreet in magna non, maximus malesuada purus. In hac habitasse platea dictumst. Sed pharetra purus commodo lorem placerat egestas. Duis nec dolor placerat, maximus enim a, vulputate ante. Nullam porta mauris quis purus cursus sollicitudin. Pellentesque et sem ac lectus semper luctus. Praesent malesuada augue nibh, nec gravida risus tincidunt vulputate. Donec pulvinar nisi eu mauris aliquam pulvinar. Nunc quis ligula quis massa gravida posuere in ac nisl. Nulla non fermentum lorem. Aliquam sed est tincidunt, volutpat metus vitae, tristique augue. Etiam venenatis varius augue, at suscipit mi accumsan sed. Vivamus porta est non nulla vulputate, sit amet rutrum dolor convallis. 
    Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis dolor a nunc facilisis pulvinar. Nulla velit eros, vulputate commodo ultricies sit amet, rhoncus ac lectus. Aliquam erat volutpat. Nullam ultrices vehicula nulla, nec consequat nunc euismod sit amet. Maecenas dictum magna vel augue imperdiet vestibulum. Cras vitae urna posuere, bibendum risus non, finibus ligula. Duis ac lacinia metus. 
    Morbi finibus condimentum fringilla. Pellentesque porttitor magna a erat pharetra tempus. Donec sed auctor nulla. Morbi congue rutrum tempor. Vivamus porta odio purus, at pulvinar risus tincidunt vel. Integer quam turpis, mattis sit amet fringilla eget, gravida eget tellus. Maecenas nec dignissim est. Nam turpis nulla, malesuada vel felis vitae, egestas viverra augue. Sed mi nisl, vehicula et fermentum at, bibendum id ex. Praesent mollis ullamcorper tortor ac accumsan. Etiam consectetur dignissim tellus in egestas. Donec eu ipsum hendrerit, cursus augue ut, lacinia sem. Quisque at dui tellus. Maecenas eget volutpat tellus. 
    </p> 

CSS：

#block{ 
    background: red; 
    width 100px; 
    height: 100px; 
    display:inline; 
} 

p { 
    display: inline; 
    margin: 10px; 
    text-align: justify; 
    //float: left; 
} 

Answer 1

解決方案一：

您只需簡單地div

包裹它的原因是因爲span是一個內聯元素 - 不是塊元素。如果您希望元素符合正確的高度和寬度，擁有正確的浮點值並對其周圍的文本作出響應，則它需要是塊元素 - 哪些div是。

#block { 
 
    background: red; 
 
    width 100px; 
 
    height: 100px; 
 
} 
 
p { 
 
    display: inline; 
 
    margin: 10px; 
 
    text-align: justify; 
 
    //float: left; 
 

 
}

<div id="block"> 
 
    <span>Why isn't this 100 px?</span> 
 

 
</div> 
 
<p>Once peasant footwear, espadrilles have grown in popularity, especially in the Catalan region and the Basque countries, where many men and women wear them during the spring and summer months. Designer espadrilles are now widely available. They are usually 
 
    manufactured in Spain and South Asia. Modern espadrilles are predominantly for women, though some men's shoes are made in this style. The soles of espadrilles may be flat, platform, or wedge shaped made of natural fiber. Uppers may be made from nearly 
 
    any substance and may have open or closed toes, open or closed backs, and can be slip-on or tied to the ankle with laces. Thousands of varieties of espadrilles can be found, from inexpensive bargain brands to high priced designer brands. Espadrilles 
 
    became fashionable in the USA in the 1940s. Lauren Bacall's character in the 1948 movieKey Largo wore ankle-laced espadrilles.</p> 
 
<p>Wedge shaped espadrilles were first popularized by French fashion designer Yves Saint Laurent. At a trade fair in Paris in 1970, he came into contact with the Spanish espadrille manufacturer Castañer. Yves Saint Laurent had been looking in vain for months 
 
    for someone to make him a wedge espadrille. Castañer managed to interpret Yves Saint Laurent's vision and the wedge espadrilles were an instant hit, influencing fashion even today. The espadrille style was revived in the USA in the 1980s, due to the 
 
    success of Miami Vice—the shoe was worn by the character Sonny Crockett (played by Don Johnson). In 2013 at luxury shoe stores in New York City, a pair of espadrilles could cost nearly $500.[3]</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, laoreet in magna non, maximus malesuada purus. In hac habitasse platea dictumst. Sed pharetra purus commodo lorem placerat egestas. Duis nec dolor placerat, maximus enim a, vulputate 
 
    ante. Nullam porta mauris quis purus cursus sollicitudin. Pellentesque et sem ac lectus semper luctus. Praesent malesuada augue nibh, nec gravida risus tincidunt vulputate. Donec pulvinar nisi eu mauris aliquam pulvinar. Nunc quis ligula quis massa 
 
    gravida posuere in ac nisl. Nulla non fermentum lorem. Aliquam sed est tincidunt, volutpat metus vitae, tristique augue. Etiam venenatis varius augue, at suscipit mi accumsan sed. Vivamus porta est non nulla vulputate, sit amet rutrum dolor convallis. 
 
    Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis dolor a nunc facilisis pulvinar. Nulla velit eros, vulputate commodo ultricies sit amet, rhoncus ac lectus. Aliquam erat volutpat. Nullam ultrices vehicula nulla, nec consequat 
 
    nunc euismod sit amet. Maecenas dictum magna vel augue imperdiet vestibulum. Cras vitae urna posuere, bibendum risus non, finibus ligula. Duis ac lacinia metus. Morbi finibus condimentum fringilla. Pellentesque porttitor magna a erat pharetra tempus. 
 
    Donec sed auctor nulla. Morbi congue rutrum tempor. Vivamus porta odio purus, at pulvinar risus tincidunt vel. Integer quam turpis, mattis sit amet fringilla eget, gravida eget tellus. Maecenas nec dignissim est. Nam turpis nulla, malesuada vel felis 
 
    vitae, egestas viverra augue. Sed mi nisl, vehicula et fermentum at, bibendum id ex. Praesent mollis ullamcorper tortor ac accumsan. Etiam consectetur dignissim tellus in egestas. Donec eu ipsum hendrerit, cursus augue ut, lacinia sem. Quisque at dui 
 
    tellus. Maecenas eget volutpat tellus.</p>

第二溶液：

另一種解決方案是添加到float:left元件span

#block { 
 
    background: red; 
 
    width 100px; 
 
    height: 100px; 
 
    float: left; 
 
} 
 
p { 
 
    display: inline; 
 
    margin: 10px; 
 
    text-align: justify; 
 
}

<span id="block">Why isn't this 100 px?</span> 
 

 
<p>Once peasant footwear, espadrilles have grown in popularity, especially in the Catalan region and the Basque countries, where many men and women wear them during the spring and summer months. Designer espadrilles are now widely available. They are usually 
 
    manufactured in Spain and South Asia. Modern espadrilles are predominantly for women, though some men's shoes are made in this style. The soles of espadrilles may be flat, platform, or wedge shaped made of natural fiber. Uppers may be made from nearly 
 
    any substance and may have open or closed toes, open or closed backs, and can be slip-on or tied to the ankle with laces. Thousands of varieties of espadrilles can be found, from inexpensive bargain brands to high priced designer brands. Espadrilles 
 
    became fashionable in the USA in the 1940s. Lauren Bacall's character in the 1948 movieKey Largo wore ankle-laced espadrilles.</p> 
 
<p>Wedge shaped espadrilles were first popularized by French fashion designer Yves Saint Laurent. At a trade fair in Paris in 1970, he came into contact with the Spanish espadrille manufacturer Castañer. Yves Saint Laurent had been looking in vain for months 
 
    for someone to make him a wedge espadrille. Castañer managed to interpret Yves Saint Laurent's vision and the wedge espadrilles were an instant hit, influencing fashion even today. The espadrille style was revived in the USA in the 1980s, due to the 
 
    success of Miami Vice—the shoe was worn by the character Sonny Crockett (played by Don Johnson). In 2013 at luxury shoe stores in New York City, a pair of espadrilles could cost nearly $500.[3]</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, laoreet in magna non, maximus malesuada purus. In hac habitasse platea dictumst. Sed pharetra purus commodo lorem placerat egestas. Duis nec dolor placerat, maximus enim a, vulputate 
 
    ante. Nullam porta mauris quis purus cursus sollicitudin. Pellentesque et sem ac lectus semper luctus. Praesent malesuada augue nibh, nec gravida risus tincidunt vulputate. Donec pulvinar nisi eu mauris aliquam pulvinar. Nunc quis ligula quis massa 
 
    gravida posuere in ac nisl. Nulla non fermentum lorem. Aliquam sed est tincidunt, volutpat metus vitae, tristique augue. Etiam venenatis varius augue, at suscipit mi accumsan sed. Vivamus porta est non nulla vulputate, sit amet rutrum dolor convallis. 
 
    Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis dolor a nunc facilisis pulvinar. Nulla velit eros, vulputate commodo ultricies sit amet, rhoncus ac lectus. Aliquam erat volutpat. Nullam ultrices vehicula nulla, nec consequat 
 
    nunc euismod sit amet. Maecenas dictum magna vel augue imperdiet vestibulum. Cras vitae urna posuere, bibendum risus non, finibus ligula. Duis ac lacinia metus. Morbi finibus condimentum fringilla. Pellentesque porttitor magna a erat pharetra tempus. 
 
    Donec sed auctor nulla. Morbi congue rutrum tempor. Vivamus porta odio purus, at pulvinar risus tincidunt vel. Integer quam turpis, mattis sit amet fringilla eget, gravida eget tellus. Maecenas nec dignissim est. Nam turpis nulla, malesuada vel felis 
 
    vitae, egestas viverra augue. Sed mi nisl, vehicula et fermentum at, bibendum id ex. Praesent mollis ullamcorper tortor ac accumsan. Etiam consectetur dignissim tellus in egestas. Donec eu ipsum hendrerit, cursus augue ut, lacinia sem. Quisque at dui 
 
    tellus. Maecenas eget volutpat tellus.</p>

Answer 2

你想用display: inline-block，而不是inline：

#block { 
 
    background: red; 
 
    height: 100px; 
 
    display:inline-block; 
 
} 
 
p { 
 
    display: inline; 
 
    margin: 10px; 
 
    text-align: justify; 
 
    //float: left; 
 
}

\t <span id="block">Why isn't this 100 px?</span> 
 
<p>Once peasant footwear, espadrilles have grown in popularity, especially in the Catalan region and the Basque countries, where many men and women wear them during the spring and summer months. Designer espadrilles are now widely available. They are usually manufactured in Spain and South Asia. Modern espadrilles are predominantly for women, though some men's shoes are made in this style. The soles of espadrilles may be flat, platform, or wedge shaped made of natural fiber. Uppers may be made from nearly any substance and may have open or closed toes, open or closed backs, and can be slip-on or tied to the ankle with laces. Thousands of varieties of espadrilles can be found, from inexpensive bargain brands to high priced designer brands. Espadrilles became fashionable in the USA in the 1940s. Lauren Bacall's character in the 1948 movieKey Largo wore ankle-laced espadrilles.</p> 
 
<p>Wedge shaped espadrilles were first popularized by French fashion designer Yves Saint Laurent. At a trade fair in Paris in 1970, he came into contact with the Spanish espadrille manufacturer Castañer. Yves Saint Laurent had been looking in vain for months for someone to make him a wedge espadrille. Castañer managed to interpret Yves Saint Laurent's vision and the wedge espadrilles were an instant hit, influencing fashion even today. The espadrille style was revived in the USA in the 1980s, due to the success of Miami Vice—the shoe was worn by the character Sonny Crockett (played by Don Johnson). In 2013 at luxury shoe stores in New York City, a pair of espadrilles could cost nearly $500.[3]</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, laoreet in magna non, maximus malesuada purus. In hac habitasse platea dictumst. Sed pharetra purus commodo lorem placerat egestas. Duis nec dolor placerat, maximus enim a, vulputate ante. Nullam porta mauris quis purus cursus sollicitudin. Pellentesque et sem ac lectus semper luctus. Praesent malesuada augue nibh, nec gravida risus tincidunt vulputate. Donec pulvinar nisi eu mauris aliquam pulvinar. Nunc quis ligula quis massa gravida posuere in ac nisl. Nulla non fermentum lorem. Aliquam sed est tincidunt, volutpat metus vitae, tristique augue. Etiam venenatis varius augue, at suscipit mi accumsan sed. Vivamus porta est non nulla vulputate, sit amet rutrum dolor convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis dolor a nunc facilisis pulvinar. Nulla velit eros, vulputate commodo ultricies sit amet, rhoncus ac lectus. Aliquam erat volutpat. Nullam ultrices vehicula nulla, nec consequat nunc euismod sit amet. Maecenas dictum magna vel augue imperdiet vestibulum. Cras vitae urna posuere, bibendum risus non, finibus ligula. Duis ac lacinia metus. Morbi finibus condimentum fringilla. Pellentesque porttitor magna a erat pharetra tempus. Donec sed auctor nulla. Morbi congue rutrum tempor. Vivamus porta odio purus, at pulvinar risus tincidunt vel. Integer quam turpis, mattis sit amet fringilla eget, gravida eget tellus. Maecenas nec dignissim est. Nam turpis nulla, malesuada vel felis vitae, egestas viverra augue. Sed mi nisl, vehicula et fermentum at, bibendum id ex. Praesent mollis ullamcorper tortor ac accumsan. Etiam consectetur dignissim tellus in egestas. Donec eu ipsum hendrerit, cursus augue ut, lacinia sem. Quisque at dui tellus. Maecenas eget volutpat tellus.</p>