4

我有一个宽度为百分比的 div。是否可以在其中对齐两个 div（左侧和右侧），以便左侧 div 具有在 px 中定义的固定宽度和以百分比表示的右侧边距，而其余宽度则转到右侧 div。

例如考虑这个：

<div class="box"> 

    <div class="left">

    </div>

    <div class="right">

    </div>
</div>

.box{
    width:100%;
    border:1px solid red;
    overflow:hidden;
}


.left{
    float:left;
    margin-right:5%;
    width:100px;    
}


.right{
    Problem..
}

这是 jsfiddle 链接：http: //jsfiddle.net/s8Gwb/1/

4

4 回答 4

7

您不应该混合使用相对值和绝对值，因为仅使用 CSS 很难甚至不可能计算正确的边距或位置值。

calc()尚未在任何浏览器中实现，并且“存在风险，可能会在 CR 期间被丢弃”。

如果您仍然想实现这样的目标，您应该考虑以下事项：

<div class="box">   
    <div class="left">left content</div>   
    <div class="right-wrapper">    
        <div class="right">right content</div>
    </div>      
</div>

.left{
    float:left;
    width: 100px;
}
.right-wrapper{
    margin-left:100px;
}
.right{
    margin-left: 5%;
}

JSFiddle 演示

于 2012-06-18T18:36:36.890 回答
2 
.box{
    width:100%;
    border:1px solid red;
    overflow:hidden;
}


 .left{
    float:left;
    margin-right:5%;
     width:100px;

 }


.right{
    float:right;
   left:100px;    //notice this same as width of div left
    position:absolute;

希望这对你有用。

于 2012-06-18T18:42:02.893 回答
2

请看这是不是你想要的效果：http: //jsfiddle.net/s8Gwb/28/

我已经编辑了你的 css 并从 .right 层删除了 float:

于 2012-06-18T18:44:23.753 回答
1

也许放弃这个想法，使用一个绝对定位的 div 和一个有边距的浮动 div。这是你想要的？ http://jsfiddle.net/jefffabiny/s8Gwb/39/

于 2012-06-18T18:49:47.220 回答