как сделать это Див изменяемыми

Question

я эти две дивы:

<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

использовать это может помочь

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

Answer 3

Попробуйте использовать проценты в ваших высот и/или ширины. Вы можете также использовать их в верхней части:

top: 10%; 

Answer 4

Если установить положение относительно на пузырьке. А затем положение абсолютное с дном -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/