10

JSFIDDLE

编辑：试图达到与此相反的效果。
（而不是两侧的 2 个固定宽度的 div 和中间的一个流体宽度的 div，
我试图在两侧获得 2 个流体宽度的 div 和一个居中的 div）

我有 3 个 div：A、B 和 C。

B 需要位于 A 和 C 之间。

我需要做什么

我目前正在做的几乎与上面发生的事情相匹配。但是，如果 A、B 和 C 的容器具有奇数宽度，则一些浏览器会将 A 和 C 的宽度向下舍入，而另一些则向上舍入（分别使 C 太长 1px 和太短 1px）。

注意C右侧的额外像素

请注意， C右侧的空间要薄一个像素。

我不在乎我需要多少嵌套的 div，但我在这方面花费了太多时间！如果有人已经有解决此问题的可靠方法，请分享！

注意：
- A、B 和 C 的父级不能隐藏溢出。
- A、B 和 C 不能重叠（它们有半透明的 png）

这是我的出发点：JSFIDDLE

4

5 回答 5

7

这里有两种可行的方法，都带有警告（警告，都需要包装器）：

HTML

<section class="wrapper">
    <div class="column" id="a"></div>
    <div class="column" id="b"></div>
    <div class="column" id="c"></div>
</section>​​​​​​​​​​​

基础 CSS

.column {
    height: 3em;
}

#a {
 background-color: red;   
}
#b {
 background-color: green;
}
#c {
 background-color: blue;   
}

#b {
  width: 50px;   
}

CSS3 方法：

.wrapper {
    display:box;
    box-orient:horizontal;
    box-align:stretch;    
}

#a, #b {
    box-flex:1.0;
}

警告：仅在 Firefox 和 Webkit (Chrome/Safari) 中支持（到目前为止），两者都需要前缀规则。以上就是某天的样子。

这是一个带前缀的演示：http: //jsfiddle.net/crazytonyi/cBVTE/

表格显示方法

.wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;

}    
.column {
    display: table-cell;
}

警告： IE 直到 7 或 8 才开始支持这种显示类型。另一方面，担心旧版本 IE 的用户就像担心仍然关闭 cookie 和 javascript 的人一样。他们要么赶上，要么习惯了分页。结束炒作！

这是使用上述内容的演示：http: //jsfiddle.net/crazytonyi/kM46h/

在这两种情况下，都不需要浮动或定位，只需愿意对旧浏览器竖起中指。多大年龄取决于您选择哪种方法。

于 2012-05-15T07:16:15.673 回答
0

我想你必须像这样使用..

HTML

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

CSS

.a
{
width:50%;
height:25px;
background-color:#0F0;
float:left  
}
.b
{
width:13px;
height:25px;
background-color:#FFF;
margin-left:-6px;
float:left; 
position:relative;
z-index:99;
}
.c
{
width:50%;
height:25px;
background-color:#C33;
margin-left:-7px;
float:left; 
}
</style>
于 2012-05-15T04:37:48.103 回答
0

编辑：请使用安东尼的解决方案！它满足所有要求，没有任何非常hacky的CSS！如果您确实需要支持较旧的浏览器，请随意使用我的解决方案（但是，请注意，Anthony 的解决方案非常适合大多数情况）。

我不知道我还没有尝试过这个解决方案，但这似乎比这个问题的公认答案更好！没有四舍五入！

解决了！

如果我们将舍入的 50% 视为一个值 ( X ) 并将 B 的恒定宽度视为值Y，那么我们需要：

A 的宽度 = X
C 的宽度 = 100% - X

我决定使用它作为我的结构：

<container>
  <a></a>
  <b></b>
  <c_holder>
    <c>
    </c>
  </c_holder>
</container>

问：我们怎样才能让 C 的宽度为container_width - X？
A. 我们给 C 一个名为 c_holder 的容器，宽度为 100%，并给 C 一个左偏移X (50%)。

暂时忘记B...

现在我们有 2 个 div 彼此相邻......每个大约 50%，但加起来正好是 100%。

将所有这些都扔到一个容器中，并给这个容器一个Y的边距（B div 的宽度）。现在我们有 A 和 C 彼此相邻，但占据了 100% - Y的宽度。

给 c_holder 一个Y的左偏移量并将 B 放在 A 和 c_holder 之间。在 A 和 B 上应用左浮动。

现在 A 的宽度是X，B 的宽度是Y，C 的总左偏移量是X + Y，C 的可见宽度是容器的 100% - X - Y。

有点时髦，但它在 IE7、Chrome 和 Safari 中完美运行。我稍后会测试FF。

于 2012-05-15T02:43:43.003 回答
0

dabblet.com 上的演示：

http://img838.imageshack.us/img838/6116/cff430b799254087b6ec991.png

html:

<div id="main">
    <div class="half left">
        <div>
            <div id="a" class="col"> </div>
         </div>
    </div>
    <div class="half right">
        <div>
            <div id="c" class="col"> </div>
         </div>
    </div>
    <div id="b" class="col"> </div>
</div>

CSS：

#main {
    height: 40px;
    width: auto;
    border: 1px solid #cfcfcf;
    position: relative;
}

.half {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
}

.half.left { left: 0; }
.half.right { right: 0; }

.half > div {
    height: 100%;
    padding:0 8px;
}

.half.left > div { padding-left: 7px; }
.half.right > div { padding-right: 7px; }

.col {
    height: 100%;
    margin-top: 3px;
}

#a,
#c {
    background-color: green;
}

#b {
    background-color: red;
    margin-left: auto;
    margin-right: auto;
    width: 14px;
}

更新：更新没有重叠

于 2012-05-15T07:38:27.343 回答
0 
<style>

.a{ width:50%; height:25px; background-color:#0F0; float:left }
.b{ width:13px; height:25px; background-color:#FFF; float:left;
    position:relative; left:51%;}
.c{ width:50%; height:25px; background-color:#C33; float:right; }

</style>
于 2012-05-15T06:14:25.837 回答