一个元素左对齐，另一个元素居中对齐，但居中的元素被左元素推动答案

【问题标题】：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。

标签： html css positioning flexbox

【解决方案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。