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;
}

在桌面屏幕上，它看起来像这样（这是所需的）：

在更大的桌面屏幕上，它看起来像这样：

当浏览器窗口重新调整大小时，两个 div 重叠，在移动设备上，.bubble div 转到下一行。

当窗口重新调整大小时，将它们对齐并使 .bubble div 灵活地垂直拉伸的正确方法是什么？

4

1 回答 1

0

由于没有提供html，这里只讲理论。

一般来说，

  1. 气泡应该用 float:left、margin-left 和 position:relative 包裹在一个 div（称为气泡包装器）中。气泡包装应该放在 logo div 旁边
  2. 气泡是一个 div，其左边距足够大以容纳三角形、最小宽度和最小高度。这也是应该画边界的地方
  3. 三角形是一个 position:absolute div with left:0, top:0 inside bubble-wrapper
  4. 根据需要将内部文本包裹在气泡中。
于 2013-09-23T02:04:15.723 回答