0

私はこれらの2つの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/

たとえば、ブラウザのサイズを変更すると、ブラウザの幅に応じて縮小する必要があります。メディアクエリは必要ありません。csだけです。どのように可能ですか？

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 に答える