Question

浮动和响应式布局有一点问题。我有一个div容器，里面有一个左右div容器。两者必须在同一“行”上，但当div容器“RIGHT”设置为100％时，它会将其向下移动到下一行。我在这里做了一个快速的小提琴。

<div class="row">
    <div class="leftBox">LEFT</div>
    <div class="rightBox">RIGHT</div>
</div>

.row {
    float: left;
    width: 600px;
    height: auto;
    margin: 0px auto; 
}
.leftBox {
    float: left;
    height: 50px;
    background-color: red;
    width: 80px;
}
.rightBox {
    float: left;
    height: 50px;
    width: 100%;
    background-color: blue;
}

右侧的框需要与浏览器宽度一起流动，但保持在同一条线上。

任何帮助或指示都会很棒！提前谢谢。

Answer 1

您可以将内部div设置为display:table-cell，父级为display:table和table-layout:fixed：

.row {
    float: left;
    width: 600px;
    height: auto;
    margin: 0px auto;
    display:table;
    table-layout:fixed;
}
.leftBox {
    display:table-cell;
    height: 50px;
    background-color: red;
    width: 80px;
}
.rightBox {
    width:100%;
    height: 50px;
    display:table-cell;
    background-color: blue;
}

<div class="row">
    <div class="leftBox">LEFT</div>
    <div class="rightBox">RIGHT</div>
</div>

Answer 2

您还可以使用CSS3 calc() function：

＆＃13;

.row {
    float: left;
    width: 600px;
    height: auto;
    margin: 0px auto; 
}
.leftBox {
    float: left;
    height: 50px;
    background-color: red;
    width: 80px;
}
.rightBox {
    float: left;
    height: 50px;
    width: calc(100% - 80px);
    background-color: blue;
}

＆＃13;

<div class="row">
    <div class="leftBox">LEFT</div>
    <div class="rightBox">RIGHT</div>
</div>

＆＃13;

Answer 3

如果左框也需要缩放：

.row {
    float: left;
    width: 600px;
    height: auto;
    margin: 0px auto; 
    }
.leftBox {
    float: left;
    height: 50px;
    background-color: red;
    width: 20%;
}
.rightBox {
    float: left;
    height: 50px;
    width: 80%;
    background-color: blue;
}

CSS对齐动态Div

3 个答案: