0

我正在尝试实现 1 列灵活/1 列固定布局。'col-a' 应该是灵活的，占用 100% - 110px，'col-b' 应该是固定的并正确对齐。

我试图使用负边距，但运气不佳。

<div class="cont">

    <div class="col-a">
    Be flexible 
    </div>

    <div class="col-b">
    Be fixed
    </div>

</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.cont {
background-color: #00f;
padding: 10px;
overflow:hidden;
}

.col-a {
background-color: #0ff;
padding-right: 110px;
margin-right: -110px;
float: left;
}

.col-b {
background-color: #ff0;
width: 110px;
float: left;
}

可以只使用这个标记来完成吗？/*找到答案*/这是解决方案

.cont {
  background-color: #00f;
  overflow:hidden;
  padding: 10px;
}

.col-a {
  width: 100%;
  background-color: #0ff;
  margin-right: -110px;
  float: left;
}

.col-b {
  background-color: #ff0;
  width: 110px;
  float: right;
}
4

2 回答 2

1

我不会为此使用负边距。

这就是我将如何设置它。

  1. 将列父容器设置为相对位置。
  2. 将 A 列的 padding-right 设置为 110px（为 B 列腾出空间）
  3. 将 B 列设置为绝对位于顶部，右侧固定宽度为 110 像素。

这将使您的 A 列水平扩展 100%，同时在右侧为 B 列留出空间。

这是我上面概述的一个例子：http: //jsfiddle.net/NPn8d/

于 2012-08-31T19:20:08.617 回答
0

那么，这样的事情怎么样。

<style type="text/css"> 
     .cont{position:relative;}
     .col-a{
             border:1px solid #0000ff;
             width:auto;
             margin:0,110,0,0;
           } 
     .col-b{
             border:1px solid #ff0000;
             width:110px;
             float:right;
             top:0;
             position:absolute;
             margin:0,0,0,-110
     } 
</style> 
<div class="cont"> 
    <div class="col-a">Be flexible</div> 
    <div class="col-b">Be fixed</div> 
</div>
于 2012-08-31T19:26:36.210 回答