Question

我有这个简单的HTML页面：

.outer {
  width: 320px;
  height: 560px;
  background-color: gray;
  overflow: auto
}
.inner {
  float: left;
  background-color: pink;
  padding: 10px 10px 10px 10px;
  margin: 10px 10px 0px 10px;
  max-width: 60%;
}
.inner2 {
  float: right;
  background-color: pink;
  padding: 10px 10px 10px 10px;
  margin: 10px 10px 0px 10px;
  max-width: 60%;
}

<div class="outer">
  <div class='inner'>a a a</div>
  <div class='inner'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</div>
  <div class='inner'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class='inner'>iiiiiiiii iiiiiiiiiii</div>
  <div class='inner2'>iiiiiiiinnnnnnnnnnnnnnniiiii</div>
</div>

结果是：

我需要使用CSS以类似于聊天程序的方式在垂直流布局中排列div：一些div在左边，一些在右边。关于我的代码，我有两个问题：

1-如何强制第二个div传递到新行？

2-我怎样才能解决第三个div的问题，即强制一条很长的线没有空格来扭曲，就像第二个div一样？

Answer 1

使用flexbox尝试以下解决方案：

＆＃13;

.outer {
  display:flex;
  flex-direction:column;
  width: 320px; 
  height:560px; 
  background-color:gray; 
  overflow:auto;
}
.inner {
  align-self:flex-start;
  background-color: pink;
  padding:10px 10px 10px 10px;
  margin:10px 10px 0px 10px;
  max-width: 60%;  
  word-wrap:break-word;
}
.inner2 {
  align-self:flex-end;
  background-color: pink;
  padding:10px 10px 10px 10px;
  margin:10px 10px 0px 10px;
  max-width: 60%;    
}

＆＃13;

<body>
  <div class="outer">
    <div class='inner'> a a a  </div> 
    <div class='inner'> a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>
    <div class='inner'> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> 
    <div class='inner'> iiiiiiiii iiiiiiiiiii </div>
    <div class='inner2'> iiiiiiiinnnnnnnnnnnnnnniiiii </div>
  </div>
</body>

＆＃13;

说明：您可以使用flexbox获取自己行中的所有气泡。使用self-align，您可以定义气泡的发送方和接收方。所以你不能使用float。要打破没有空格的长词，可以使用word-wrap:break-word;。

Answer 2

如何强制第二个div传递到新行

clear:both s

inner

我如何解决第三个div的问题，即强迫很长时间没有空格的线要扭曲，就像第二个div一样？

使用word-wrap:break: break-word

我简化了代码，删除了一些不必要的代码

.outer {
  width: 320px;
  height: 560px;
  background-color: gray;
  overflow: auto
}
.outer > div {
  word-wrap: break-word;
  padding: 10px;
  margin: 10px;
  max-width: 60%;
  clear: both
}
.inner {
  float: left;
  background: pink
}
.inner2 {
  float: right;
  background: lightblue
}

<div class="outer">
  <div class='inner'>a a a</div>
  <div class='inner'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</div>
  <div class='inner'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class='inner2'>iiiiiiiinnnnnnnnnnnnnnniiiii</div>
  <div class='inner'>iiiiiiiii iiiiiiiiiii</div>
  <div class='inner2'>iiiiiiiinnnnnnnnnnnnnnniiiii</div>
</div>

html和CSS中的垂直流布局

2 个答案: