如何使此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

如果在编号上设置相对位置。然后定位绝对，箭头底部为-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/

Answer 3

使用这个可能会有帮助

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