一个元素左对齐，另一个元素居中对齐，但居中的元素被左元素推动
Posted
技术标签:
【中文标题】一个元素左对齐，另一个元素居中对齐，但居中的元素被左元素推动【英文标题】：Left-align one element and center-align another, but have centered element pushed by left element 【发布时间】：2014-09-18 09:27:10 【问题描述】：我目前正在使用 flex，我认为这是必要的，但我对所有 CSS 解决方案持开放态度。
我有一个左边有一些元素的栏。这是在此元素组上使用 flex: 0 0 auto; 并在其后的空元素上使用 flex: 1 1 auto; 完成的。
我需要将另一组元素放在这个栏的中心（而不是剩余空间的中心）。如果第一组元素不存在，我可以在居中元素的左侧和右侧使用flex: 0 0 auto; 执行flex: 1 1 auto。
但现在我需要将这些组合起来，使左侧元素保持在左侧，中间元素保持在中间，但我还需要左侧元素将中间元素向右推（因此使其不再居中）如果他们触摸。
编辑：我应该提到两个元素的宽度都是动态的。我知道高度，但最好不要它们。
【问题讨论】：
如果您共享相关代码会很好。我确信这里至少有一个人知道如何解决您的问题，但是如果您需要其他想要帮助的程序员的帮助，您需要给我们一些代码来修补...... @Banana。我认为他很清楚自己想要完成什么。 @DRD 你没明白我的意思。 您是否仅限于 css？因为使用javascript比较容易实现 @Banana 如果可能的话，我想限制自己使用 CSS。 【参考方案1】：这样的？
html
<body>
<aside>Left</aside>
<main>Right</main>
</body>
CSS
*
margin: 0;
padding: 0;
main
width: 1000px;
height: 500px;
background: cyan;
margin: 0 auto;
aside
float: left;
width: 200px;
height: 500px;
background: magenta;
【讨论】：
很遗憾我不知道宽度。 宽度是动态的，不是绝对的。 @Keavon 这就是我要说的。如果您不设置宽度，它应该可以正常工作。 哦，抱歉，我在您的评论中错过了“没有”这个词。让我试试看。 中间元素向左元素内推，见jsfiddle.net/9UJnt/5【参考方案2】：这是一个使用绝对定位并需要显式设置左块宽度的解决方案。本质上，绝对定位将块从流中取出，并确保左右块不重叠，左边距设置在右侧块上，即左侧块宽度的大小。
这是一个小提琴：http://jsfiddle.net/4RqEr/。 （调整预览窗口大小以查看效果）。
HTML：
<div class = "container">
<div>left</div>
<div>Pushed to Right</div>
</div>
CSS：
*
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
body
padding: 10px;
.container
background-color: #ccc;
position: relative;
text-align: center;
overflow: hidden;
.container > div:first-child,
.container > div:nth-child(2)
padding: 10px 20px;
background-color: #fA5858;
color: #fff;
text-transform: uppercase;
font: 15px/1 Sans-Serif;
.container > div:first-child
position: absolute;
left: 0;
width: 100px;
.container > div:nth-child(2)
display: inline-block;
background-color: #5882FA;
margin: 0 100px;
white-space: nowrap;
【讨论】：
只有在他知道左侧元素的宽度时才有效，如果它是动态的，您的解决方案将不起作用 是的，这就是我在介绍中所说的：“......并且需要明确设置左侧块的宽度。” @Banana 感谢您提醒我提及这一点。我已经编辑了我的问题，提到宽度是未知的。 我认为你最好的选择是使用这个解决方案，并在 dom 加载后使用 javascript 调整蓝色元素的边距 您实际上可以在没有 JavaScript 的情况下完成它，但我能想出的唯一解决方案是使用 flex-box 并使用额外的标记。本质上，左侧块是重复的（在 HTML 中）并位于最后一个块（使用 HTML 或order）。然后，您可以使用justify-content: space-between，它可以正常工作：jsfiddle.net/jdh2H。以上是关于一个元素左对齐，另一个元素居中对齐，但居中的元素被左元素推动的主要内容，如果未能解决你的问题，请参考以下文章