0

到目前为止，我的一段代码运行良好，但有一个小故障需要解决。

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

流体项目正在适当地调整大小，但是随着浏览器/容器的大小调整，每隔一段时间就会出现一些小问题。

见：http: //jsfiddle.net/tedgrafx/kTeCC/

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

可以做些什么来弥补这个小故障，使其在调整大小时显得无缝？

任何/所有帮助将不胜感激。

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 });
    }
}
4

3 回答 3

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;
}
于 2013-07-09T23:34:52.957 回答
0

就像 OneOfOne 建议的附录一样；要让#left 和#right 不重叠（而不是浮动#right），您可以将 padding-left 添加到#main 并将 #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;
}

顺便说一句 - 如果它们的组合宽度大于它们的容器，浮动块将堆叠在一起；你正在做的模数事情是在#right 上获得均匀的像素宽度是你的罪魁祸首。

于 2013-07-10T00:32:15.703 回答
0

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;

}
于 2013-07-10T08:20:33.717 回答