我正在嘗試使寬度爲200px的圖像旁邊的窗口的剩餘寬度爲段落。文本佔用設置寬度圖像旁邊的剩餘寬度
<section>
<p>Paragraph</p>
<img src='#' width='200'>
<section>
我正在嘗試使寬度爲200px的圖像旁邊的窗口的剩餘寬度爲段落。文本佔用設置寬度圖像旁邊的剩餘寬度
<section>
<p>Paragraph</p>
<img src='#' width='200'>
<section>
您可以在寬度
width:calc(100% - 200px);
計算該商品添加到您的段落
做有沒有辦法只能做到這一點使用保證金/填充? – 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>
如果你想顯示的文字旁邊的形象,但它周圍不換,你可以在一段使用overflow: hidden
。
這裏有一個小提琴: https://jsfiddle.net/wu94qpLt/
請告訴我們什麼樣的研究已完成,並嘗試你已經在解決這個問題 – Praveen