gpt4 book ai didi

css - 让 div 填充剩余宽度 - 模仿标题栏?

转载 作者:行者123 更新时间:2023-11-28 12:21:26 24 4
gpt4 key购买 nike

我想创建一个类似于 iphone 标题栏的布局: enter image description here

我试图将下面的示例放在一起,但我不确定如何让中间列的宽度扩展,以便它使用所有剩余空间。我可以在运行时在 javascript 中执行此操作,但想知道是否有 css 解决方案。在这里:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}

#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
}
</style>

</head>

<body>

<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">title</div>
<div id="colRight">right</div>
</div>

</body>
</html>

谢谢

最佳答案

一种更简单的方法是使用这样的 HTML 结构:

<div id="parent" style="width:100%">
<div id="colLeft">left</div>
title
<div id="colRight">right</div>
<div>

将左右div float 到合适的边上,设置父级上的文本居中对齐。中间 div 的文本等任何样式都可以应用于父级。

关于css - 让 div 填充剩余宽度 - 模仿标题栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13887847/

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