自动伸缩立柱（申报单）

检查这个fiddle请：自动伸缩立柱（申报单）

我想以下几点：红柱有一些文字，黄色的是动态内容，绿色无关，只是一种颜色。我希望红色和绿色的列与黄色内容一样高。 height: 100%没有工作

来源

2013-05-14 user1929946

您可以使用表（但表一种不好的做法，实际上） – gamehelp16 2013-05-14 14:17:16

没有表对不起，我用来做什么的 – user1929946 2013-05-14 14:19:50

根据所需的浏览器支持，你可以使用[CSS3 Flexbox的（http://www.w3.org/TR/css3-flexbox/）（不支持IE9或更早版本）。 – 2013-05-14 14:43:09

可以使用负利润率达到的效果 enter image description here

浮动的div应该被包裹在与溢出容器：隐藏这是fiddle 这是代码

#container { 
    overflow:hidden; 
} 

#container div { 
    padding-bottom:2000px; 
    margin-bottom:-2000px; 
}

来源

2013-05-14 14:25:07 Fico

不错，与所有浏览器兼容，包括ie7 + – Stano 2013-05-14 14:36:23

@Stano。 HY。很高兴你喜欢。 IE7在使用负边距时存在一些问题，但在这些情况下不存在问题。与i7的问题，据我所知，如果出现你假装看不见（溢出：可见）切缘阴性所获得的部分。在这种情况下，您应该使用相对定位的容器进行入侵。 – Fico 2013-05-14 14:54:43

1这IE（甚至IE6）的所有版本[测试精]（https://litmus.com/pub/bf5ac41/screenshots）。 – 2013-05-14 15:01:32

Working Demo

不是一个简单的解决方案，但它的工作原理：

HTML

<div id="container3"> 
    <div id="container2"> 
     <div id="container1"> 
      <div id="col1">Column 1</div> 
      <div id="col2">Column 2</div> 
      <div id="col3">Column 3</div> 
     </div> 
    </div> 
</div>

CSS：

#container3 { 
    float:left; 
    width:100%; 
    background:green; 
    overflow:hidden; 
    position:relative; 
} 
#container2 { 
    float:left; 
    width:100%; 
    background:yellow; 
    position:relative; 
    right:30%; 
} 
#container1 { 
    float:left; 
    width:100%; 
    background:red; 
    position:relative; 
    right:40%; 
} 
#col1 { 
    float:left; 
    width:26%; 
    position:relative; 
    left:72%; 
    overflow:hidden; 
} 
#col2 { 
    float:left; 
    width:36%; 
    position:relative; 
    left:76%; 
    overflow:hidden; 
} 
#col3 { 
    float:left; 
    width:26%; 
    position:relative; 
    left:80%; 
    overflow:hidden; 
}

得到它从here

来源

2013-05-14 14:19:37

在问题中，2列显示宽度可变。此方法不支持可变宽度列。 – 2013-05-14 14:49:28

你应该仍然可以调整它，但你是对的。如果你想变宽度，不是最好的办法。 – 2013-05-14 14:51:43

尝试使用列表来代替。
您可以将其显示为表格行和列表项目表格单元格什么使所有列表项目具有相同的高度。

的jsfiddle：

http://jsfiddle.net/Q7MFX/4/

代码：

<ul style="list-style:none;padding:0;display:table-row"> 
    <li style="display:table-cell;background-color: red;">11<br>11<br>11<br></li> 
    <li style="display:table-cell;background-color: yellow;">22342<br>dsfsdf<br>sdfs df<br>v sdfsdf s dffffffffffffffff</li> 
    <li style="display:table-cell;background-color: green; width: 40px;">11</li> 
</ul>

来源

2013-05-14 14:24:08

请勿使用列表进行造型。列表应该包含有序/无序的信息列表或定义。改为使用div元素：http://jsfiddle.net/hDAuf/ – chaenu 2013-05-14 14:34:28

@chaenu你是完全正确的！我想要沟通的主要事情是'display：table-row'方法。 ;-) – 2013-05-14 14:51:27

您可以使用jQuery

http://jsfiddle.net/9XVSr/

HTML：

<div class="col" id="col1" style="background-color: red; float: left">11<br>11<br>11<br></div> 
<div class="col" id="col2" style="background-color: yellow; float: left">22342<br>dsfsdf<br>sdfs df<br>v sdfsdf s dffffffffffffffff</div> 
<div class="col" id="col3" style="background-color: green; width: 40px; float: right">11</div>

jQuery的

$(document).ready(function() { 
maxcol = Math.max($('#col1').height(),$('#col2').height(),$('#col3').height()); 
$('.col').height(maxcol);  
});

来源

2013-05-14 14:27:36 Borgtex

如果你想要一个衬垫：。 '$（ '栏'）的高度（Math.max.apply（数学，$（ “山口”）地图（函数（）{$返回（本）.height（）;}）））;' – 2013-05-14 15:04:59

自动伸缩立柱（申报单）

回答

相关问题