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

Question

I am currently using flex and I assume it is necessary, but I am open to all CSS solutions. 我目前正在使用flex，并且我认为这是必要的，但是我对所有CSS解决方案都持开放态度。

I have a bar with some elements on the left. 我在左侧有一个带有一些元素的栏。 This is done with flex: 0 0 auto; 这是通过flex: 0 0 auto;完成的flex: 0 0 auto; on this element group and flex: 1 1 auto; 在这个元素组和flex: 1 1 auto; on an empty element after it. 在它后面的一个空元素上。

I need to put another set of elements in the center of this bar (not the center of the remaining space). 我需要在此栏的中心放置另一组元素（而不是剩余空间的中心）。 If the first set of elements weren't there, I could do flex: 1 1 auto on the left and right of the centered element with flex: 0 0 auto; 如果没有第一组元素，则可以执行flex: 1 1 auto flex: 0 0 auto;在居中元素的左侧和右侧，使用flex: 0 0 auto; . 。

But now I need to combine these so the left element stays on the left and the middle element stays in the middle, but I also need the left element to push the middle element to the right (therefore making it no longer centered) if they touch. 但是现在我需要组合这些元素，以便左元素停留在左侧，中间元素停留在中间，但是如果它们触摸，我还需要左元素将中间元素推到右侧（因此使其不再居中）。

Edit: I should mention that the widths of both elements are dynamic. 编辑：我应该提到两个元素的宽度是动态的。 I do know heights, but it would be better not to need them. 我确实知道高处，但最好不要高处。

Answer 1

Something like this? 像这样吗

HTML HTML

<body>
    <aside>Left</aside>
    <main>Right</main>
</body>

CSS 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

Here's a solution that uses absolute positioning and requires the left block's width to be explicitly set. 这是一个使用绝对定位的解决方案，需要明确设置左块的宽度。 Essentially, absolute positioning takes the block out of the flow and to make sure that the left and right blocks do not overlap, the left margin is set on the right block that is the size of the left block's width. 本质上，绝对定位会将块从流程中移出，并且要确保左右块不重叠，请在右边块上设置左边距，即左边块宽度的大小。

Here's a fiddle: http://jsfiddle.net/4RqEr/ . 这是一个小提琴： http : //jsfiddle.net/4RqEr/ 。 (Resize the preview window to see the effect). （调整预览窗口的大小以查看效果）。

HTML: HTML：

<div class = "container">
    <div>left</div>
    <div>Pushed to Right</div>
</div>

CSS: 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 HTML

CSS CSS

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

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

问题描述

2 个解决方案

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

HTML HTML

CSS 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