html - 如何使文本环绕 div 或 span 元素？

Question

我希望能够指定元素的宽度和高度，并让文本环绕在任何大小的周围。例如，如果我想创建一个 100 X 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

您想使用 display: inline-block 而不是 inline:

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

	<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>