如何使这个div可调整大小

Question

我有这两个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。 这怎么可能？

Answer 1

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

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

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

Answer 2

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

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/

Answer 3

使用它可能会有所帮助

.bubble {
    resize: none;
}
.arrow-left {
    resize: none;
}

Answer 4

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

top: 10%;