css - 文本占用设置宽度图像旁边的剩余宽度

Question

我正在尝试让一个段落占据宽度为 200 像素的图像旁边窗口的剩余宽度。

<section>
    <p>Paragraph</p>
    <img src='#' width='200'>
<section>

http://jsfiddle.net/bu00y453/

Answer 1

你只需要在图像上设置float:left，这样段落文本就可以在它旁边流动。另外:有右边距，看起来更漂亮一些。

尽量将图片放在源代码中应该紧挨着它的段落之前。

/* 
Part 2 - CSS
Style the content here. Make the content look good!
*/

#content {
  margin: 0px 20px;
}
header {
  text-align: center;
}
img {
  float: left;
  margin-right: 10px;
}

<!--
Part 2 - HTML
Instructions:
Write semantic markup for the following content. Lay out the page such that
the pictures are to one side of the blocks of content. 
-->
<section id='content'>
  <header>
    <h1>Why Do They? Heat-Seeking Kitties</h1>
    <h3>Your cat has good reasons for craving his fun in the sun.</h3>
  </header>
  <section class='article'>
    <img id='first-image' src="https://farm6.staticflickr.com/5081/5261689090_255c9173b6_n.jpg" width="200" alt="sunbathing">
    <p id='first-par'>Like tiny kittens seek out their mamas, cats find warm spots every chance they get. This is the first sensory indulgence cats develop, and they don't ever seem to lose it, says John C. Wright, Ph.D., a Certified Applied Animal Behaviorist and Professor
      of Psychology at Mercer University in Macon, Georgia.</p>
  </section>
  <section class='article'>
    <p id='second-par'>"For the newborn, t source of something warm and soft is Mom's belly, which also is where the kitten finds nourishment and a cuddly place to snooze," Dr. Wright says. Warmth has beneficial physical effects, too, as it helps soothe older cats' aches.
      Cats with arthritis love to curl up on soft blankets or snuggle with their owners. Some experts also say cats love hot spots because they were originally desert animals. It's an instinct of their ancestors. Some Like it Hot Some cats will do anything
      for the heat they crave. Muffin, a female Tortoiseshell, liked to lie on a gas space-heater. "We couldn't let her lie there because it was dangerous," says owner Audrey Pavia of Santa Ana, California. Pavia's other cat, Simba, used to lie on a window
      perch even in the summer. "She was so 'drunk' from the heat that she staggered a few steps and then sat down before she started moving again," Pavia says.</p>

    <img src="https://farm7.staticflickr.com/6168/6228843045_da7dcdcc0d_n.jpg" width="240" height="320" alt="Sunbathing">
  </section>
  <p>If you're looking for ways to warm your kitty, you might consider buying or building a window perch. Cats love a cozy chair or bed, too, provided there is ample sunlight. Heating pads are not recommended.</p>

  Other Cat Articles A Cat's Natural Instincts http://www.iams.com/pet-health/cat-article/a-cats-natural-instincts Adult Cat Feeding 101 http://www.iams.com/pet-health/cat-article/feeding-your-adult-cat-101-the-right-food-for-ages-one-to-six Crazy About
  Catnip http://www.iams.com/pet-health/cat-article/crazy-about-catnip
</section>