Question

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

我左边有一些元素。这是通过此元素组上的flex: 0 0 auto;和后面的空元素上的flex: 1 1 auto;来完成的。

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

但是现在我需要将它们组合起来，左边的元素保持在左边，中间元素保持在中间，但我还需要左边的元素将中间元素向右推（因此不再使其居中）如果他们碰了。

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

Diagram

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 个答案:

HTML

CSS