Question

我有以下CSS和HTML脚本：

.chat {
       width: 100px;
       }

       .bubble{
       background-color: #F2F2F2;
       border-radius: 5px;
       box-shadow: 0 0 6px #B2B2B2;
       display: inline-block;
       padding: 5px 10px;
       position: relative;
       vertical-align: top;
       max-width: 200px;
       min-width: 200px:
       word-wrap: break-word;
       font-size: 85%;
       }

       .bubble::before {
       background-color: #F2F2F2;
       content: "\00a0";
       display: block;
       height: 10px;
       position: absolute;
       top: 13px;
       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;
       }
       .me {
       float: left;
       margin: 5px 45px 5px 20px;
       }

       .me::before {
       box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
       left: -9px;
       }

       .you {
       margin: 5px 20px 5px 45px;
       right: 10px;           
       position: absolute;       
    }

       .you::before {
       box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
       right: -9px;
       }
</style>
</head><body>
<div class="chat">
    <div class="bubble you">test1</div>
    <div class="bubble you">test2</div>
    <div class="bubble me">test3</div>
</div>
</body></html>

但是这个脚本被覆盖的元素放在同一行上，如下所示：

    test1(test3 overwrites it)              test2

但我想要的是：

    test1
                                            test2
    test3

有谁知道如何实现这一目标？

Answer 1

删除绝对定位并将其换出另一个解决方案。

解释：绝对定位的元素不会对流做出贡献。

第一个＆＃34;你＆＃34;元素当前位于文档的正常流程中。但是，由于它没有贡献到流程，下一个＆＃34;你＆＃34; element使用流中的相同点来定位自身并在同一位置渲染。

现在，我已经解释过，我将包含所选答案的略微修改版本：

.chat {
    width: 100%;
    overflow: hidden; /* clear fix for floats */
}

.bubble {
    clear: both;
}

.you {
    float: right;
    /* position: absolute;
       right: 10px; */
}

＆＃13;

.chat {
    width: 100px;
    overflow: hidden;
}

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 5px 10px;
    position: relative;
    vertical-align: top;
    max-width: 200px;
    min-width: 200px:
    word-wrap: break-word;
    font-size: 85%;
    clear: both;
}

.bubble::before {
    background-color: #F2F2F2;
    content: "\00a0";
    display: block;
    height: 10px;
    position: absolute;
    top: 13px;
    -moz-transform:    rotate( 29deg ) skew( -35deg );
    -ms-transform:     rotate( 29deg ) skew( -35deg );
    -o-transform:      rotate( 29deg ) skew( -35deg );
    -webkit-transform: rotate( 29deg ) skew( -35deg );
    transform:         rotate( 29deg ) skew( -35deg );
    width:  20px;
}
.me {
    float: left;
    margin: 5px 45px 5px 20px;
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;
}

.you {
    margin: 5px 20px 5px 45px;
    float: right;
}

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;
}

＆＃13;

<div class="chat">
    <div class="bubble you">test1</div>
    <div class="bubble you">test2</div>
    <div class="bubble me">test3</div>
</div>

＆＃13;

Answer 2

.me气泡问题是position: absolute;。那些总是会出现在最近的父母的右上角position: relative;（如果所有父母都没有，那么就是html的一角）。如果你在元素上使用float但希望它们各自出现在新行中，那么clear: both;就可以了。

这些是对css的更改，我把所有其他内容保留原样：

.chat {
    width: 100%;
}

.bubble {
    clear: both;
}

.you {
    float: right;
    /* position: absolute;
       right: 10px; */
}

fiddle

Answer 3

尝试删除浮动和绝对定位。

＆＃13;

<form action="<?php echo base_url();?>admin/admin_page" method="post" enctype="multipart/form-data">
        <div class="col-xs-3">
            <div class="form-group">
                <label for="exampleInputEmail1"> Product name </label>
                <input type="text" name="name" class="form-control" >
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1"> Category </label>
                <input type="text" name="category" class="form-control">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1"> Description </label>
                <textarea class="form-control" name="description" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1"> Image </label>
                <input type="file" name="userfile" class="form-control">
            </div>
            <input type="submit" name="add_product" class="btn btn-default" value="OK" />
        </div>
    </form>
</div>

＆＃13;

.bubble {
  background-color: #F2F2F2;
  border-radius: 5px;
  box-shadow: 0 0 6px #B2B2B2;
  display: inline-block;
  padding: 5px 10px;
  position: relative;
  vertical-align: top;
  max-width: 200px;
  min-width: 200px;
  word-wrap: break-word;
  font-size: 85%;
}
.bubble::before {
  background-color: #F2F2F2;
  content: "\00a0";
  display: block;
  height: 10px;
  position: absolute;
  top: 13px;
  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;
}
.me {
  margin: 5px 45px 5px 20px;
}
.me::before {
  box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4);
  left: -9px;
}
.you {
  margin: 5px 20px 5px 45px;
  right: 10px;
}
.you::before {
  box-shadow: 2px -2px 2px 0 rgba(178, 178, 178, .4);
  right: -9px;
}

＆＃13;

Answer 4

将.Bubble显示更改为display: block，将.Bubble ::更改为position: relative之前的位置。

内联块将内容放置在任何可以适合的位置，并且由于您的位置被设置为绝对的前一个.bubble（AKA test1），下一个元素正好可以在哪里可以垂直对齐到顶部相对于其他元素。绝对元素不会将相对定位元素影响为额外的tid位。

修改

你的min-width标签有一个：而不是a;这会导致它破坏你的自动换行和最小宽度样式。这实际上就是为什么当你改变我提到的两件事时它会变得如此混乱。您不能使用绝对定位底线，因为它不适用于流量。

我的不好，我注意到上面我说要将.bubble :: before标记位置更改为相对位置，这用于你的语音气泡效果，将.you位置更改为相对位置。然后找到一种不同的方式来对齐泡泡，我会一直看着自己。

CSS显示彼此之下的元素

4 个答案: