试图水平显示 div - 在我知道之前问过但无法让它工作

Question

我正在尝试正确格式化我的 css，以水平显示两个 div。第一个 div 包含 3 个 div，看起来不错，像这样，在屏幕的左侧：

你可以在下面看到我的代码。

现在我正在尝试让 div4、image2 来填充那个大空白。

但我就是不明白。我已经从这个站点尝试了很多东西 - 溢出：隐藏;，清除 - 但我能得到的最好的是图像出现在右边，好的，但低于 #character_and_bubbles 的基线 - 不在我想要的空间.请问有什么帮助吗？

我的标记代码：

<div id = "character_and_bubbles">

 <div id = "top_bubble_div">
  <div id="top_bubble">
   bubble text here
  </div>
 </div>

 <div id = "p_mechanic">
  mechanic image here
 </div>

 <div id = "right_bubble_div">
  <span id="right_bubble">
   bubble text here
  </span>
 </div>
</div>


<div id="image2">
    # how do I position this image in the big white space?
</div>

还有我的 Sass：

#character_and_bubbles {
margin-top:80px;

#top_bubble_div {
#top_bubble {
    background-color: #fff0a0;
    background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:         linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    border-radius: 5px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
                3px 3px 0 hsla(0,0%,0%,.1);
    color: #333;
    display: inline-block;
    font: 16px/25px sans-serif;
    width: 500px;
    padding: 15px 25px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}

#top_bubble:after, #top_bubble:before {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff0a0;
    bottom: -25px;
    content: '';
    position: absolute;
    right: 475px;
}
#top_bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 472px;
}
}

#p_mechanic {
  padding:20px;
  float:left;

}


#right_bubble_div {
padding:20px;

#right_bubble {
    background-color: #fff0a0;
    background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:         linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    border-radius: 5px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
                3px 3px 0 hsla(0,0%,0%,.1);
    color: #333;
    display: inline-block;
    font: 16px/25px sans-serif;
    width: 282px;
    padding: 15px 25px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}

#right_bubble:after, #right_bubble:before {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff0a0;
    bottom: 68px;
    content: '';
    position: absolute;
    right: 332px;
}
}
}

#image2{
/* how do I get this to fill that big white space? */
    float:right;
}

Answer 1

您需要将<div id="image2"> 移到源顺序中其余内容的上方。在其当前位置，它呈现在其他内容的下方。

例如：

<div id="image2"># how do I position this image in the big white space?</div>
<div id="character_and_bubbles">
    <div id="top_bubble_div">
        <div id="top_bubble">bubble text here</div>
    </div>
    <div id="p_mechanic">mechanic image here</div>
    <div id="right_bubble_div">
        <span id="right_bubble">bubble text here</span>
    </div>
</div>

您还需要给它一个高度 - 要么用内容填充它，要么用 height: 300px; 填充它。否则浏览器会将其呈现为空/无尺寸。

http://jsfiddle.net/sTvGx/3/

但是如果你的#image 元素只是用来保存背景图片（非语义），为什么不让它成为所有这些 div 的父级的背景元素，比如 body？

我假设您提供的是 Sass 而不是 CSS。