Question

我在div旁边设置了一个img元素。我尝试了几种不同的方法来删除两者之间发生的换行但没有取得任何成功。任何意见都将非常感谢！

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

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

Answer 1

添加：


#newsMainBody img {
float: left;
}

#startOfMonth {
float: right;
}

并删除<br />之后的第一个<div id="starOfMonth">，它没用（如果你需要一些空间，请在css中使用padding-top）

Answer 2

尝试制作图像和div浮动：左; 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;
}

然后你可以写：

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

Answer 3

假设您指的是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 */

应该实现这一目标，但我不确定为什么你在<br /> div中有一个浮动的#starOfMonth。这可能是个问题。

现场演示，over at jsbin（显然image没有加载（假设src没有指向任何东西，但它应该让你感受到我的方法一样。）

在IMG之后删除换行符

3 个答案: