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

-1

我正在尝试使宽度为200px的图像旁边的窗口的剩余宽度为段落。文本占用设置宽度图像旁边的剩余宽度

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

http://jsfiddle.net/bu00y453/

来源

2016-08-16 MARyan87

请告诉我们什么样的研究已完成，并尝试你已经在解决这个问题 – Praveen

您可以在宽度

width:calc(100% - 200px);

计算该商品添加到您的段落

来源

2016-08-16 21:57:48

做有没有办法只能做到这一点使用保证金/填充？ – MARyan87

没有，因为元素不知道有多少空间可用，并且如果它变得很大，就会中断。你可以给它填充，但你必须设置框大小：border-box;在你的段落，所以填充在宽度内计算。 –

你只需要设置在图像上的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>

来源

2016-08-16 22:03:14 andreas

如果你想显示的文字旁边的形象，但它周围不换，你可以在一段使用overflow: hidden。

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

来源

2016-08-17 01:44:40

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

回答

相关问题