gpt4 book ai didi

html - 流体布局 - 调整窗口大小时文本从屏幕上滑出

转载 作者:太空宇宙 更新时间:2023-11-03 23:50:51 24 4
gpt4 key购买 nike

我不确定如何解决这个问题。

这是我的 fiddle :http://jsfiddle.net/ccX5u/

除左侧图片外,一切看起来都不错。但我的主要问题是当我缩小浏览器窗口时 user name |注销 滑到一边。我真的想让它尽可能流畅。

我需要更改什么才能获得此行为?

<html>
<body>
<style>
.title-wrapper {
padding-top: 20px;
margin-left:auto;
margin-right:auto;
width: 98%;
display:block;
}


#title-area {
background: url('image.png')center center no-repeat;
float: left;
clear: none;
width: 270px;
height: 100px;
}

#menuTitleThin{
position:absolute;
padding-top:10px;
margin-left:15px;
margin-right:10px;
font-size:20px;
border-bottom: 3px solid #d95936;
width:82%;


}

#menuLoginInfo {
float:right;
font-size:20px;
position:relative;
}
#menuLoginInfo a {
text-decoration: none;
}


/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.0em;
font-weight: 600;
margin: 50px 0 5px;
padding: 0;
text-align: left;
}

ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}

ul#menu li a {
background: none;
color: #999;
text-decoration: none;
}

ul#menu li a:hover {
color: #333;
text-decoration: none;
}

</style>
<div class="title-wrapper">
<div id="title-area">
<span id="title"/>
</div>
<span id="menuTitleThin">Services - <b>Title</b>
<span id="menuLoginInfo"><span>user name</span> | <span>Log off</span></span>
</span>

<span>
<ul id="menu">
<li>test</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</span>
</div>
</body>
</html>

最佳答案

这是流体设置中 float 元素问题的一个很好的例子。

您可以使用 calc()设置 #menuTitleThin 的宽度,这将允许菜单流畅,并且仍然为左侧的 #title-area 留出空间。然后你只需要适本地 float #menuTitleThin 以允许平滑地调整大小:

Working Example

#title-area {
background: red url('image.png')center center no-repeat; /* added red for demo only */
float: left;
clear: none;
width: 270px;
height: 100px;
}
#menuTitleThin {
float: left; /* change here */
padding-top:10px;
margin-left:15px;
margin-right:10px;
font-size:20px;
border-bottom: 3px solid #d95936;
width: calc(100% - 295px); /* change here */
}

关于html - 流体布局 - 调整窗口大小时文本从屏幕上滑出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20200298/

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