Question

很抱歉，标题令人困惑。基本上，我正在研究一个tumblr主题，我需要在固定宽度的容器中包含三个相邻的div。它们的内容都没有固定，所以它们都有可变的宽度。中间div应该始终以容器为中心，而左边和右边的div总是＆＃34;触摸＆＃34;中间div，因此，当中间div的宽度发生变化时左右移动（左右s可能是图像，因此text-align不会始终有效）。另外，我可能还需要隐藏左，右或左右两个div。

这是一个概念性图像：

enter image description here

我可以轻松地使用flexbox（JFiddle），但flex only has 86% global support获得此功能。

这是我在没有使用flexbox的情况下最接近的，但我无法将中间div（带文本）置于标题div的中心，同时保留两侧图像的相对位置：{ {3}}

* {
    height: 100%;
    position: relative;
}
body {
    height: 200px;
}
/* just to get rid of scrollbar */
 p {
    margin: 0;
}
.title {
    background: #aaa;
    height: 22px;
    width: 450px;
    /* for example */
    margin: 0 auto;
}
.container {
    background: #abc;
    float: left;
}
.lr {
    transform: translate(0, -100%);
}
.left {
    background: green;
    float: left;
}
.left img {
    transform: translate(-100%);
}
.center {
    background: red;
    display: inline-block;
    z-index: 2;
}
.right {
    background: blue;
    float: right;
}
.right img {
    transform: translate(100%);
}
.left img, .right img {
    height: 100%;
}

<div class="title">
    <div class="container">
        <div class="center">CENTERCENTERCENTERCEN</div>
        <div class="lr">
            <div class="left">
                <img src="http://i.imgur.com/7bvErJN.jpg" />
            </div>
            <div class="right">
                <img src="http://i.imgur.com/q8Mq0YZ.jpg" />
            </div>
        </div>
    </div>
</div>

其他人提到试图将标题显示为一个表格，但这需要将中间单元格居中到整行，并且让左右两边的单元格占据剩下的空间，我就是这样。 ;我不确定你的宽度是否固定时是否能做到。

任何人都知道其他解决方案吗？

Answer 1

如果您可以更改HTML，请应用以下内容：

首先将左右元素移到中心位置：

<div class="center">
    CENTERCENTERCENTERCEN
    <div class="left">
       testtest<img src="http://i.imgur.com/7bvErJN.jpg" />
    </div>
    <div class="right">
       <img src="http://i.imgur.com/q8Mq0YZ.jpg" />
    </div>
</div>

然后在CSS上：

/*Keep the center container on the middle*/
.title {
   text-align:center;
 }
.center {
   position:relative;
   display:inline-block;
}

/*Position elements based on the relative center parent*/
.left {
   position:absolute;
   top:0;left:0;
   transform:translateX(-100%)
}
.right {
   position:absolute;
   top:0;right:0;
   transform:translateX(100%)
}

选中此DemoFiddle

Answer 2

使用position: absolute应该有帮助。

我将您的HTML更改为以下内容：

<div class="title">
    <div class="container">
        <img class="left" src="http://i.imgur.com/7bvErJN.jpg" />
        <div class="center">CENTERCENTERCENTERCEN</div>
        <img class="right" src="http://i.imgur.com/q8Mq0YZ.jpg" />
    </div>
</div>

<强> CSS

.title {
    background: #aaa;
    height: 22px;
    width: 450px;
    /* for example */
    margin: 0 auto;
    text-align: center;
}
.container {
    background: #abc;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    text-align: left;
}
.center {
    background: red;
}
.left, .right {
    position: absolute;
    top: 0px;
}
.left {
    right: 100%;
}
.right {
    left: 100%;
}

<强> Working Fiddle

Answer 3

已更新以显示OP更新

这里不需要灵活，为什么不使用百分比？浮动所有容器并将百分比设置为相对于所需大小。（中间50％，外部容器25％）。

您可以将外部容器用作包装，这样您仍然可以在内部容器上使用边框，而不会弄乱尺寸。然后将内部容器浮动到外部容器中（如果有意义的话）。下面的示例只是将内部p标记浮动到外部容器。

这使得它始终拥抱内部容器，同时保持相对大小并保持中间居中。

以下示例：

Fiddle

HTML

<div class="container">
  <div class="flexa">
    <div class="left">
        <p>leftleft</p>
    </div>
    <div class="center"><p>CENTERCENTdsfdfdERCENTsdfdfsfERCEN</p></div>
    <div class="right">
        <p>ri</p>
    </div>
  </div>
  <div class="bottom">BOTTOMOMOM</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
div {
  background: #aaaaaa;
  overflow: hidden;
}
p{
  border: 1px solid black;
}
.container {
  width: 500px;
  /* for example */
  margin: 0 auto;
}
.right p{ /* This is what makes it work. This could be a div with class of inner or something like that. */
  float:left;
}
.left p{ 
  float:right;
}
.flexa div{
  float:left;
}
.left {
   width:25%;
}
.center {
  width: 50%;
}
.right {
  width:25%;
}
.bottom {
  display: block;
  margin: 0 auto;
  text-align: center;
}

将三个div的中间居中并将另外两个相对于中间div定位

3 个答案: