gpt4 book ai didi

css - 如何使用CSS将某行中的div拉伸(stretch)到 "all left space"

转载 作者:太空宇宙 更新时间:2023-11-04 00:30:35 24 4
gpt4 key购买 nike


我有以下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.panel
{
border: 1px solid black;
background: #f2f2f2;
}

#after-top
{
position: absolute;
top: 90px;
left: 1px;
right: 1px;
font-size: 16px;
}

#languages
{
width: 120px;
text-align: center;
float: left;
}

#location
{
float: left;
margin: 0 1px 0 1px;
}
</style>
</head>
<body>
<div id="after-top">
<span class="panel" id="languages"><span>English</span>&nbsp;|&nbsp;<span>Русский</span></span>
<span class="panel" id="location">&nbsp;</span>
</div>
</body>
</html>

这会产生一些类似的东西:

+-------------------+ +-+| English | Russian | | |+-------------------+ +-+

我希望第二个 div 拉伸(stretch)到屏幕末尾减去 1px。
像这样的东西:

+-------------------+ +--------------------------------------------------------+| English | Russian | |                                                        |+-------------------+ +--------------------------------------------------------+

当我放大屏幕时,我不想要这样的效果:

+-------------------+| English | Russian |+-------------------+            +-----------------------------------------------------------+            |                                                           |            +-----------------------------------------------------------+

但是(当我升级窗口缩放时)像这样:

+-------------------+ +------------------------------+| English | Russian | |                              |+-------------------+ +------------------------------+

最佳答案

使用溢出:隐藏:

#panel {
display: block;
}
#after-top, #location {
overflow: hidden;
}
#languages {
float: left;
}

关于css - 如何使用CSS将某行中的div拉伸(stretch)到 "all left space",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4298425/

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