0 
.logo {
text-align: center;
font-size: 12pt;
}
.bubble{
    background-color: rgba(0, 36, 97, 0.4);
    background: rgba(0, 36, 97, 0.4);
    color: #fff;
    -pie-background:  rgba(0, 36, 97, 0.4);
    behavior: url(PIE.htc);
    padding: 0px 10px 0px 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 6px #B2B2B2;
    min-height: 100px;
width: 350px;
}

.bubble::before {
    background-color: rgba(0, 36, 97, 0.4);
background: rgba(0, 36, 97, 0.4);
-pie-background:  rgba(0, 36, 97, 0.4);
    behavior: url(PIE.htc);

    content: "\00a0";
    display: block;
    height: 20px;
    position: relative;
    top: 20px;
     transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
    z-index: -1;
}

デスクトップ画面では、次のようになります (これが望ましい)。

大きなデスクトップ画面では、次のように表示されます。

ブラウザー ウィンドウのサイズを変更すると、2 つの div が重なり、モバイル デバイスでは .bubble div が次の行に移動します。

ウィンドウのサイズが変更されたときに、それらを整列させ、.bubble div を柔軟にして垂直方向に伸ばす正しい方法は何ですか?

4

1 に答える 1

0

html が提供されていないので、ここでは理論についてのみ説明します。

一般に、

  1. バブルは、float:left、margin-left、および position:relative を使用して div (バブル ラッパーと呼びます) でラップする必要があります。バブルラッパーは、ロゴ div の隣に配置する必要があります
  2. バブルは、三角形に十分な大きさの左マージン、最小幅、最小高さを持つ div です。境界線を引く場所でもあります
  3. 三角形は、バブル ラッパー内に left:0、top:0 を持つ position:absolute div です。
  4. 必要に応じて、内側のテキストを吹き出しで囲みます。
于 2013-09-23T02:04:15.723 に答える