Question

我有一个宽度为百分比的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/

Answer 1

您不应该混合相对值和绝对值，因为使用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 Demo

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

} 希望这对你有用。

Answer 3

请查看这是否是您想要的效果：http://jsfiddle.net/s8Gwb/28/

我已经编辑了你的css并从.right图层

中删除了float：

Answer 4

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

结合％和px宽度的CSS

4 个答案: