Question

我正在尝试正确格式化我的css，以水平显示两个div。第一个div包含3个div，在屏幕左侧看起来很好，如下所示：

enter image description here

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

现在我正试图让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;
}

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的父元素的背景元素，比如正文？

我认为你提供的是Sass而不是CSS。

试图水平显示div - 在我知道之前询问但无法使其正常工作

1 个答案: