Html 在 IMG 后删除换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3843742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove a linebreak after IMG
提问by Feisty Mango
I have an img element set next to a div. I have tried a couple of different approaches to remove the linebreak that is occurring between the two but have not had any success. Any input would be greatly appreciated!
我在 div 旁边设置了一个 img 元素。我尝试了几种不同的方法来删除两者之间发生的换行符，但没有任何成功。任何投入将不胜感激！
CSS
CSS
#newsMainBody
{
margin-right: auto;
margin-left: auto;
background:#61bc49;
width: 750px;
height: 900px;
font-family:"sans-serif";
text-align:left;
-moz-border-radius: 10px;/*mozilla*/
z-index: 1;
white-space: nowrap;
}
#starOfMonth
{
background: #ffff99;
width: 275px;
height: 300px;
text-align: center;
font-family:"sans-serif";
white-space: normal;
}
HTML
HTML
<div id="newsMainBody">
<img src="img/farm.jpg" alt="Farm photo" />
<div id="starOfMonth">
<br />
<font style="font-weight:bold;font-size:medium; color:Purple;">DooLittle Farms Childcare</font><br />
<font style="font-size:small;">"We're Growing Great Kids"</font><br />
<img id="starImg" src="img/gold-star.jpg" alt="Star of the Week" width="200" height="200"/><br />
Our Star Of The Week!
</div>
</div>
采纳答案by Retired_User
Add:
添加：
#newsMainBody img {
float: left;
}
#startOfMonth {
float: right;
}
and remove the first <br />after <div id="starOfMonth">, it's useless (use padding-top in css instead if you need some space)
并删除第一个<br />after <div id="starOfMonth">，它没用（如果需要一些空间，请在 css 中使用 padding-top ）
回答by M2tM
Try making the image and the div float:left; You WILLneed to provide a width for each to make this work.
尝试使图像和 div float:left; 您WILL需要提供一个宽度为每个来完成这项工作。
#starOfMonth
{
background: #ffff99;
float: left;
width: 275px;
height: 300px;
text-align: center;
font-family:"sans-serif";
white-space: normal;
}
#starOfMonthImage {
height:275px; /*Optional, but it's a good idea to supply height for images so that the browser doesn't shift things around during the loading process*/
width:475px; /*OR SOMETHING! Make it narrower if it isn't working, I haven't been super careful about reading your padding in depth so this may be wrong.*/
float:left;
}
Then you can write:
然后你可以写：
<div id="newsMainBody">
<img src="img/farm.jpg" alt="Farm photo" id="starOfMonthImage" />
<div id="starOfMonth">
<br />
<font style="font-weight:bold;font-size:medium; color:Purple;">DooLittle Farms Childcare</font><br />
<font style="font-size:small;">"We're Growing Great Kids"</font><br />
<img id="starImg" src="img/gold-star.jpg" alt="Star of the Week" width="200" height="200"/><br />
Our Star Of The Week!
</div>
</div>
回答by David says reinstate Monica
On the assumption you're referring to the one with the alt-text of Farm photo:
假设您指的是带有 alt-text 的那个Farm photo：
div#newsMainBody > img {
/* display: block; commented out as per @M2tM's comment, below */
float: left;
width: 200px;
}
#starOfMonth {
margin-left: 200px; /* or 'width of floated image' + 'a margin of 10px'
} /* or whatever, just so they're not physically touching */
Should achieve this, but I'm unsure why you've got a floating <br />inside the #starOfMonthdiv. That might be a problem.
应该实现这一点，但我不确定为什么你<br />在#starOfMonthdiv 中有一个浮动。那可能是个问题。
Live demo, over at jsbin(obviously the images don't load (given the srcisn't pointing at anything, but it should give you a feel for what my approach does.)
现场演示，在 jsbin 上（显然images 没有加载（鉴于 ssrc没有指向任何东西，但它应该让您了解我的方法的作用。）
