css盒子右对齐,css中两个盒子并列

　　两端对齐的元素的排列和布局在实际开发中随处可见。通过使用flex布局的-justify-content: space-between可以轻松实现。但在某些场景下，我们需要考虑兼容性等问题，所以不得不放弃flex布局。所以需要学习排版才能达到同样的效果。在互联网上搜索了一些答案后，很少有人发现可以找到简单而实质性的问题解决方案。的确，我在实际项目中经常遇到这种布局，所以我利用业余时间在这里分享一下它的原理实现，以供交流和分享。

场景要求

　　在具有一定宽度的盒子中，在不影响盒子的原始布局的情况下，对齐项目的两端。

　　假设我们这里有这些商品。

　　* {边距：0；填充：0；} .容器{宽度：1200px高度：500px背景色：浅绿色；边距：0自动；} ul {/*关键是元素的宽度，通过margin */width负移与容器重叠：1220px左边距：-20px；列表样式：无；} ul Li { float:left；/* width=(框宽-边距间距*一行项目数-1)/一行项目数*/*(1200 px-20 * 2)/3 */width:386.666 px；高度：60px边距：0px 0 20px 20px背景色：红色；}css的重点在于我们需要计算出项目的宽度，/* width=(框宽-边距间距*一行中的项目数-1)/一行中的项目数*/。这里我打算一行显示三个项目，所以那就是(1200px-20 * 2)/3，为什么一行的项目数是-1来计算marign所占的宽度？三项不应该是三个边距吗？这就是实现两端对齐的本质。想象一下浮动布局，一行元素在流上一个接一个的排列。当流方向的宽度不够时，元素将被折叠。如果希望Qi连续显示，我们确实可以将第三项的边距值设置为0。显示两端对齐的行是没问题的，但是一旦项数很大且不确定，怎么取消一行最后一项的边距呢？很明显，将边距设置为0并不是最好的解决方案，那么这个时候你可以处理他的外包框，设置外框的宽度ul(这里我用ul标签，block标签也可以)和-margin的值。

为什么外部盒子的宽度是1220px

　　这是容器的原始宽度

　　这是ul的宽度。对，比容器大，比右边大。此时，ul经过-margin处理后，可以在视觉上对齐两端。

　　取消ul的背景色后，达到了效果。

总结

　　关于CSS实现框内多个元素对齐效果的这篇文章到此结束。关于CSS元素两端对齐的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。