Question

我正在尝试制作一个段落，将宽度为200px的图像旁边的窗口剩余宽度。

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

http://jsfiddle.net/bu00y453/

Answer 1

您只需要在图像上设置float:left，以便段落文本可以在其旁边流动。另外：右边距看起来好一点。

尝试将图像放在源代码中应该在其旁边流动的段落之前。

＆＃13;

/* 
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;
}

＆＃13;

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

＆＃13;

Answer 2

如果您希望文本显示在图片旁边而不是环绕它，则可以在段落上使用'replace_response' => \App\Http\Middleware\ReplaceMiddleware::class,。

这是一个小提琴： https://jsfiddle.net/wu94qpLt/

Answer 3

你可以用宽度

来计算

width:calc(100% - 200px);

将其添加到您的段落

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

3 个答案: