1

到目前为止，感谢大家的帮助。我更新了描述、概念图和 JSFiddle 链接以使事情更清晰一些。

我整天都在为这个看似很小的问题绞尽脑汁。我的 web 开发者朋友很困惑，我在搜索这个网站和其他网站时找不到合适的答案（虽然，我可能在途中的某个地方错过了它）。

这是我想要实现的目标：

  • 1 个固定宽度容器 DIV 内的 3 个非固定宽度 DIV
  • 中心 DIV 需要居中，并且不大于它包含的文本。
  • 左右 DIV 需要填充容器 DIV 中的剩余空间。

以下是一些有助于传达此概念的链接：

这就是我想要结束的

看看这个 JSFiddle 链接

基本的 HTML：

<div id="container" >
  <div id="left" ></div>
  <div id="center" >Text inside center should resize this block</div>
  <div id="right" ></div>
</div>

下面，我删除了我尝试过的大部分样式。这个 CSS 当前以 DIV 为中心（如果我将其设置为内联块），但我需要其他 div 来填充剩余的左右空间：

#container {
  width:750px;
  text-align:center;
  border:3px solid #E85355;
}
#left {
  background-color:#A3CB46;
}
#center {
      background-color:#6D6E71;
  display:inline-block;
  color:#FFFFFF;
}
#right {
  background-color:#1DB0CE;
}

我已经尝试过浮动、无包装、溢出等。感谢任何可以提供帮助的人！

4

4 回答 4

1

试试下面的 CSS。它填满了容器的宽度......

#container {
    width:764px;
    text-align:center;
}
#container > div {
    display: table-cell;   
}
#center {
    background-color:#CDD7D7;
}
#right, #left {
    background-color:#E85355;
    width:200px;
}

编辑：显示：容器上的表，不需要...

于 2013-10-24T04:03:02.003 回答
0

尝试这个：

jsfiddle.net/SHnc9/36/

于 2013-10-24T04:03:37.077 回答
0

你可以做到flexbox！演示：http ://dabblet.com/gist/7187048

标记

<div class='container'>
  <div class='box left'></div>
  <div class='box center'>enter text here to see this box grow!</div>
  <div class='box right'></div>
</div>

CSS

.container {
  display: flex;
  }

.box {
  flex-grow: 1;
  }
.center {
    flex-grow: 0; /* to get the box to wrap closely around the text */
    }

根据 caniuse.com http://caniuse.com/#search=flexbox，所有主要的桌面浏览器都支持它，firefox 有部分支持，这可能意味着它使用旧语法/不支持一些新属性，但演示我检查时工作正常。

只需确保使用前缀（或使用无前缀/无前缀插件），为旧浏览器版本添加旧语法（在新语法下方添加旧语法）。此外，display: inline-block用作后备。

您可能还想查看 flexie.js http://flexiejs.com/。

必读： http ://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2013-10-27T20:12:35.540 回答
0

你需要这个吗？

CSS

#container {
    width:764px;
    text-align:center;}
#left {
    background-color:#E85355;
    width:20px;
    height:20px;
    float:left;
}
#center {
    background-color:#CDD7D7;
    display:inline-block;}
#right {
    background-color:#65A8A6;
    width:20px;
    height:20px;
    float:right;
}

演示

于 2013-10-24T03:52:57.810 回答