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

Question

我目前正在使用flex，并且我认为这是必要的，但是我对所有CSS解决方案都持开放态度。

我在左侧有一个带有一些元素的栏。 这是通过flex: 0 0 auto;完成的flex: 0 0 auto; 在这个元素组和flex: 1 1 auto; 在它后面的一个空元素上。

我需要在此栏的中心放置另一组元素（而不是剩余空间的中心）。 如果没有第一组元素，则可以执行flex: 1 1 auto flex: 0 0 auto;在居中元素的左侧和右侧，使用flex: 0 0 auto; 。

但是现在我需要组合这些元素，以便左元素停留在左侧，中间元素停留在中间，但是如果它们触摸，我还需要左元素将中间元素推到右侧（因此使其不再居中）。

编辑：我应该提到两个元素的宽度是动态的。 我确实知道高处，但最好不要高处。

Answer 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;
}

Answer 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;
}

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

问题描述

2 个解决方案

解决方案1
0 2014-07-26 18:31:24

HTML

CSS

解决方案2
0 2014-07-26 18:49:46

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

问题描述

2 个解决方案

解决方案1 0 2014-07-26 18:31:24

HTML

CSS

解决方案2 0 2014-07-26 18:49:46

解决方案1
0 2014-07-26 18:31:24

解决方案2
0 2014-07-26 18:49:46