0

我正在尝试正确格式化我的 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>

还有我的萨斯：

#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;
}
4

1 回答 1

2

您需要<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>

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

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

但是，如果您的#image 元素只是用来保存背景图像（非语义），为什么不将其作为所有这些 div 的父级的背景元素，例如 body？

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

于 2013-07-01T21:52:02.217 回答