gpt4 book ai didi

html - 固定长度 DIV 与百分比长度 DIV 内联?

转载 作者:太空宇宙 更新时间:2023-11-04 12:40:12 25 4
gpt4 key购买 nike

抱歉,标题含糊不清,这个问题很难措辞。观察下面的代码:

<!DOCTYPE html>
<html>
<head>
<style>
.float
{
float:left;
display:inline-block;
height:50px;
}

#a
{
width:80%;
background-color:lightgrey;
}

#b
{
width:20%;
background-color:lightblue;
}
</style>
</head>
<body>
<div class="float" id="a">The width of this div should adjust depending on the screen size.</div>
<div class="float" id="b">The width of this div should stay the same regardless of screen size.</div>
</body>
</html>

当我运行它时,DIV“a”和“b”的宽度会根据屏幕大小而变化,正如您所期望的百分比,但我想要 DIV "b"保持固定宽度(如 50 像素),同时仍然允许 DIV "a"填充屏幕左侧和 DIV 左边缘之间的空间“b”。

有什么想法吗?

最佳答案

使用 calc(100% - 50px):

演示 Fiddle

.float {
float: left;
display: inline-block;
height: 50px;
}

#a {
-webkit-width: calc(100% - 50px);
width: calc(100% - 50px);
background-color:lightgrey;
}

#b {
width:50px;
height: 100%;
background-color:lightblue;
}

关于html - 固定长度 DIV 与百分比长度 DIV 内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26943786/

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