gpt4 book ai didi

html - 为什么应用 float :right; in this specific case does it cause the div to go under the previous div?

转载 作者:太空宇宙 更新时间:2023-11-04 10:51:20 26 4
gpt4 key购买 nike

我试图让一个 div 向右浮动,但是当应用 float:right 并使用浏览器缩小页面大小时,div 会位于前一个 div 的下方。

https://jsfiddle.net/Crystalwolf/bku2f08c/1/

HTML

<div id="container">
<div id="navbar-container">
<div id="mainlogo">
</div>
<div id="sublogo">
This is a subtitle test
</div>
<div id="navbutton-container">
<div class="navbutton navcurrent">
Home
</div>
<div class="navbutton">
About
</div>
<div class="navbutton">
Web Design
</div>
<div class="navbutton">
Programming
</div>
<div class="navbutton">
Graphic Design
</div>
<div class="navbutton">
Contact
</div>
</div>
</div>
<div id="carousel">
</div>
</div>

CSS

#container {
width: 100%;
height: 100%;
}

#navbar-container {
position: fixed;
background-color: white;
width: 100%;
height: 100px;
padding: 15px;
color: white;
padding-left: 60px;
margin-left: auto;
margin-right: auto;
padding-left: 50px;
padding-right: 50px;
min-width: 1200px;
overflow: hidden;
white-space: nowrap;
}

#mainlogo {
color: #373c40;
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
position: relative;
float: left;
display: inline-block;
padding-left:50px;
}

#sublogo {
color: #373c40;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
position: relative;
float: left;
padding: 25px;
display: inline-block;
}

#carousel {
background-image: url("http://3nacu.com/unique/images/stars.png");
width: 100%;
height: 500px;
}

#navbutton-container {
margin-top: 10px;
background-color: white;
height: 50px;
padding-left: 50px;
float: right; //THIS SPECIFIC FLOAT RIGHT
display: inline-block;
padding-right:50px;
}

.navbutton {
display: inline-block;
vertical-align: top;
height: 50px;
padding: 15px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
color: #373c40;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
cursor: pointer;
text-transform: uppercase;
font-weight: 700;
}

.navbutton:hover {
background-color: #373c40;
color: white;
}

.navcurrent {
background-color: #B39EB5;
color: white;
}

例如,让浏览器在 1920 处显示结果,所有内容都在一行中。一旦您将其缩短相当多,它就会继续进入前一个 div 的下方,而不仅仅是启用水平滚动条。

最佳答案

这是预期的行为,如果容器内没有足够的空间容纳 float 元素,它们就会中断。如果您想要一个可滚动的溢出,则需要为容器提供足够大的固定宽度(例如 1200px 而不是 100%)以容纳所有 float 元素。

关于html - 为什么应用 float :right; in this specific case does it cause the div to go under the previous div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34978359/

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