gpt4 book ai didi

javascript - 如何将其余宽度设置为正确的 float 元素?

转载 作者:行者123 更新时间:2023-11-30 15:30:43 25 4
gpt4 key购买 nike

我想做的就是将 width: {the rest of width} 设置为具有 float:right 属性的元素。这是我的代码:

.wrapper{
border: 1px solid;
padding-left: 10px;
}

.fix{
border: 1px solid blue;
width: 80px;
display:inline-block;
}

.rest{
float: right;
border: 1px solid red;
}
<div class='wrapper'>
<div class='fix'> fix width </div>
<div class='rest'> it should has both right float and the rest of width</div>
</div>

我怎样才能填补这个空白?这是预期的输出:

enter image description here

最佳答案

不确定您在 CSS 上的灵 active ,但如果您在固定的 div 上使用 float:left,则可以在右侧使用 overflow:auto

.wrapper{
border: 1px solid;
padding-left: 10px;
}

.fix{
border: 1px solid blue;
width: 80px;
display:inline-block;
float: left;
}

.rest{
border: 1px solid red;
overflow: auto;
}
<div class='wrapper'>
<div class='fix'> fix width </div>
<div class='rest'> it should has both right float and the rest of width</div>
</div>

如果您需要将右侧 div 的实际内容 float 到右侧,您可以添加一个内容容器使其在右侧 float 。

.wrapper{
border: 1px solid;
padding-left: 10px;
}

.fix{
border: 1px solid blue;
width: 80px;
display:inline-block;
float: left;
}

.rest{
border: 1px solid red;
overflow: auto;
}

.right-content{
float:right;
}
<div class='wrapper'>
<div class='fix'> fix width </div>
<div class='rest'><div class="right-content"> it should has both right float and the rest of width</div></div>
</div>

关于javascript - 如何将其余宽度设置为正确的 float 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42280511/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com