如何平等地划分div，不仅在彼此之间如同对齐，而且在容器的两侧。
我想重新创建一个有效的＆＃34;对...＆＃34; +＆＃34;空间＆＃34;和＆＃34;包装＆＃34;纯/普通css中的特征。
此处显示（使用handle缩小）：
.flex-container {
display: flex;
justify-content: space-around;
background-color: DodgerBlue;
flex-wrap: wrap;
}
.flex-container>div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.resize {
resize: both;
overflow: hidden;
}<body>
<div class="flex-container resize">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>A container with the justify-content property set to <em>space-around</em> will display its items with the equal amount of space around them.</p>
</body>
我最近的尝试可以在这里找到： 问题：容器两侧没有相等的间距。 （使用句柄缩小）：
.my-nonflex-container {
width: 100%;
display: inline-block;
background-color: DodgerBlue;
text-align: justify;
}
.spacer {
display: inline-block;
margin: 0 auto;
background-color: black;
}
.my-nonflex-container>div {
background-color: #faffff;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.stretch {
width: 100%;
display: inline-block;
height: 20px;
background-color: #003060;
color: white;
text-align: center;
margin-bottom: 20px;
}
.resize {
resize: both;
overflow: hidden;
}<body>
<div class="my-nonflex-container resize">
<div class="spacer">
<div>1</div>
</div>
<div class="spacer">
<div>2</div>
</div>
<div class="spacer">
<div>3</div>
</div>
<div class="spacer">
<div>4</div>
</div>
<div class="spacer">
<div>5</div>
</div>
<span class="stretch">stretcher workaround</span>
</div>
</div>
<p>A container with the text-justify property and a span-stretch to also justify "wrapped" content.</p>
</body>
答案 0 :(得分：1)
使用非flex CSS可以在某种程度上复制flex属性，但我不确定你是否能够通过CSS获得所需的一切。
我使用以下CSS管理了justify-content: space-around的复制品：
<div class="not-a-flexbox">
<div class="box">
<p> 1 </p>
</div>
<div class="box">
<p> 2 </p>
</div>
<div class="box">
<p> 3 </p>
</div>
<div class="box">
<p> 4 </p>
</div>
<div class="box">
<p> 5 </p>
</div>
</div>
.not-a-flexbox {
display: table;
width: 100%;
}
.box {
display: table-cell;
text-align: center;
}
.box > p {
display: inline-block;
min-width: 60px;
min-height: 60px;
margin: 10px;
}
在此处查看此操作： https://jsfiddle.net/kz60gnjw/
不幸的是，我无法将其包裹起来。
虽然它不是你所要求的，但我确实设法让justify-content: space-between的非flexbox副本工作和包装。您可以在此处查看相应的代码： https://jsfiddle.net/g1kvcn7z/
我的回答主要基于这篇文章：https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
我无法以您想要的方式组合flexbox的不同部分，但您可能找到我错过的东西。如果有帮助的话，在这里没有flexbox的情况下会复制更多Flexbox样式的例子： https://codepen.io/msankhala/pen/PNawBK
在一天结束时，我认为你可能不得不求助于使用媒体查询来改变布局，当涉及到正确的包装时（哪种方式会破坏这一点）。你的另一种选择当然是javaScript，但我没有建议你在你的标题中排除它。
如果这是用作不支持flexbox的内容的后备，那么我找到了这篇文章： https://medium.com/css-mine/flexbox-how-to-deal-with-older-browsers-fbf6eb8c7a65