1

我有 css 代码列 a 和列 b im 在我的代码中使用 float 来动态扩展列 a 但这没有发生，我想做尽可能多的我在 b 列中添加内容，a 列要扩展请查看我的代码http://jsfiddle.net/hadinetcat/E8jd3/

我的代码：

CSS

.container {
  border: 1px solid #000000;
  overflow: hidden;
  width: 100%;
}

.left {
  width: 45%;
  float: left;
  background:none repeat scroll 0 0 lightblue;  
}

.right {
  width: 45%;
  float: right;
}

HTML

<div class = "container">
<div class="left">
column a
column a<br />
column a<br />
column a<br />
column a<br />
column a<br />
column a<br />
</div>


<div class="right">
column b<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />

</div>
</div>

<div style="clear: both;"></div>
4

3 回答 3

1

您可以尝试display:table用于您的父母，然后display:table-cell用于列

CSS

<style>
.parent {
    display: table;  
    width:100%;
}

.left {
    display: table-cell; 
    width:200px;
    background-color:#0c0;
}

.right {
    width:auto;
    display: table-cell;
    background-color:#f00;
}

.footer {
    background-color:#eee;
}
</style>

HTML

<body>

    <div class="parent">
         <div class="left">aaaa</div>
         <div class="right">bb<br />bbb<br />bbb</div>
    </div>

    <div class="footer">Footer</div>

</body>

看看它在行动：http: //jsfiddle.net/2JmBL/

于 2013-09-23T22:22:44.773 回答
1

这是一个简单的解决方案（JSFiddle http://jsfiddle.net/Yjeq2/1/）

（您的 HTML 没有变化）

CSS

<style type="text/css"> html, body {
    font-family:verdana;
    font-size:12px;
}
.parent {
    border:1px solid red;
    width:100%;
    padding:5px;
    overflow:hidden;
}
.left {
    border:1px solid blue;
    width:200px;
    float:left;
    position:relative;
    padding:3px 0;
}
.right {
    border:1px solid green;
    width: calc(100% - 200px);
    padding:3px 0;
    margin-left: 200px;
}

 .left, .right {
    padding-bottom:8000px;
    margin-bottom:-8000px;
    background:none repeat scroll 0 0 lightblue;
}
.clr {
    clear:both;
}
.footer {
    border:1px solid orange;
    position: relative;
    padding:3px;
    margin-top:5px;
}
</style>
于 2013-09-23T22:35:59.290 回答
1

嗨，我已经更新了 JSFiddle 中的代码，

check it here : http://jsfiddle.net/btCQn/1/

<style>
.container {
  border: 1px solid #000000;
  overflow: hidden;
  width: 100%;
    position:relative;

}

.left {
  width: 45%;
  float: left;
  background:none repeat scroll 0 0 lightblue;
  position:absolute;
}

.right {
  width: 45%;
  float: right;

}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
$(".left").css("height",$(".right").height());
});
</script>

它的工作

于 2013-09-23T22:28:07.187 回答