Question

我正在尝试实现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;
}

Answer 1

我不会使用负余量。

这就是我设置它的方式。

将列父容器设置为相对位置。
将列A设置为具有110px的填充权（为B列留出空间）
将B列绝对定位到顶部，右侧固定宽度为110px。

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

以上是我在上面概述的示例：http://jsfiddle.net/NPn8d/

Answer 2

那么这样的事情呢。

<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>

CSS负利润，我做错了什么？

2 个答案: