0

我有这两个 div：

<div class="bubble">
   blablablabla
 <div class="arrow-left"></div>
</div>

.

.bubble{
    background-color:#156ac6; 
    padding: 15px 10px 10px 10px; 
    color: white;
    font-family:Georgia;
}
.arrow-left {
    position:relative;
    top:42px;
    right:0;
    border-left: 42px solid transparent;
    border-right: 0px solid transparent;
    border-top: 42px solid #156ac6;
    margin: 10px;
}

http://jsfiddle.net/jgWmM/

我希望这是灵活的，例如，如果我调整浏览器的大小，它也应该根据浏览器的宽度缩小。我不想要媒体查询。只是CSS。这怎么可能？

4

4 回答 4

1

由于您没有在这些 div 上设置宽度，因此默认情况下它们应根据浏览器调整大小。但是，您可以以百分比设置宽度以确保：

.bubble { width: 100%; }
.arrow-left { width: 100%; }

此外，您不需要媒体查询来执行此操作，但媒体查询是 css。

于 2013-08-07T16:35:25.583 回答
1

如果您在气泡上设置相对位置。然后在箭头上以 -42px 的底部和右侧 0px 定位绝对位置。箭头将始终位于右下角。然后您可以使用百分比作为宽度，气泡将是容器的大小。

HTML

        <div class="bubble">
               blablablabla
             <div class="arrow-left"></div>
        </div>

CSS

.bubble{
    background-color:#156ac6; 
    padding: 15px 10px 10px 10px; 
    color: white;
    font-family:Georgia;

    position:relative;
    width:60%;
}
.arrow-left {
    position:absolute;
    bottom:-42px;
    right:0;
    border-left: 42px solid transparent;
    border-right: 0px solid transparent;
    border-top: 42px solid #156ac6;
    margin: 10px;
}

http://jsfiddle.net/ySn36/

于 2013-08-07T16:37:40.870 回答
0

使用它可能会有所帮助

.bubble {
    resize: none;
}
.arrow-left {
    resize: none;
}
于 2013-08-07T16:36:30.803 回答
0

尝试在您的高度和/或宽度中使用百分比。您也可以在顶部使用它们：

top: 10%;
于 2013-08-07T16:37:04.577 回答