Question

到目前为止，我的代码片段运行得相当不错，但是需要解决一些小问题。

目标是让两个项目彼此相邻，其中一个是固定宽度，另一个填充给定容器中的剩余可用宽度。

流体项目正在适当调整大小，但是随着浏览器/容器的大小调整，每次都会出现一些打嗝。

这两个项目是浮动的，但是当您调整宽度时，在某些宽度处它们不会浮动，并且会垂直堆叠 - 将一个推到另一个下方。

可以采取哪些措施来解决这个小故障，以便在调整大小时看起来无缝？

感谢任何/所有帮助。

HTML：

<div class="panel">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

CSS：

html, body{
    margin:0;
    padding:0;
}
.panel {
    float:left;
    width:100%;
    margin:0;
    padding:0;
}
.left {
    float:left;
    width:50px;
    height:10px;
    margin:0;
    background:red;
}
.right {
    float:right;
    width:100%;
    height:10px;
    margin:0;
    background:blue;
}

使用Javascript：

// Resize Top-Right Panel section on the Entity Panels.
$(document).ready(function () {
    resizeRight();
    $(window).resize(function () {
        resizeRight();
    });
});
function resizeRight() {
    // Subtract the width of the TopLeft section from the width of the entityPanel div:
    var right_width = $('.panel').width() - ($('.left').width());
    // Set the width of the TopRight to an even number:
    if (right_width % 2 == 0) { // Using the modulus operator to determine if 'mid_width' even number.
        right_width = right_width + 1; // Now we set 'mid_width' to an odd number.
        // Set the width of the TopRight section:
        $('.right').css({ 'width': right_width });
    }
}

Answer 1

你真的不需要javascript，你可能会失去#right上的浮动。除非我误解了你想要的东西。

http://jsfiddle.net/kTeCC/7/

html, body{
    margin:0;
    padding:0;
}
#main {
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float:left;
    width:30px;
    height:20px;
    margin:0;
    background:red;
}
#right {
    height:30px;
    margin:0;
    padding-left: 5px;
    background:blue;
}
br { 
    clear: both;
}

Answer 2

正如OneOfOne所建议的附录;要#left和#right不重叠（而不是浮动#right），你可以向#main添加padding-left，向左边添加#left：http://jsfiddle.net/rasmusfl0e/33pVN/

html, body{
    margin:0;
    padding:0;
}
#main {
    padding-left: 30px;
    background-color: pink;
}
#main:after {
    clear: both;
    content: " ";
    display: table;
}
#left {
    float: left;
    margin-left: -30px;
    width: 30px;
    background: red;
}
#right {
    background: blue;
}

而且BTW - 如果它们的组合宽度大于它们的容器，则浮动块将堆叠在彼此之上;你在#right上获得偶数像素宽度所做的模数是你的罪魁祸首。

Answer 3

http://jsfiddle.net/kTeCC/16/

只使用位置，顶部，左侧，右侧的简单解决方案

html, body{
    margin:0;
    padding:0;
}
#main {
    position:relative;

    width:100%;
    margin:0;
    padding:0;
}
#left {
    position: absolute;
    left:0;
    top:0;

    width:30px;
    height:30px;
    margin:0;
    background:red;
    color:#fff;
}
#right {
    position:absolute;
    left:30px;
    right:0;
    top:0;

    height:30px;
    margin:0;
    background:blue;
    color:#fff;

}

调整大小时Javascript和CSS动态宽度浮动小故障

3 个答案: