我有这个简单的 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 一样强制没有空格的很长的行被扭曲？
最佳答案
使用 flexbox 尝试以下解决方案:
.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%;
}<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>说明:您可以使用 flexbox 将所有气泡排成一行。使用 self-align，您可以定义气泡的发送方和接收方。所以你不必使用float。要在没有空格的情况下打断一个长单词，您可以使用 word-wrap:break-word;。
关于html - html和CSS中的垂直流布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37278147/