[英]Float and width are not doing what they should be doing in HTML and CSS
我的代码有两个问题: (1) CSS 中的 float 参数影响了应该完全不相关的项目, (2) width 或 float 或两者都没有按预期与另一个元素一起工作(继续阅读,它会更简单)。
HTML:
<nav>
<a class="nav-title-link" href="/">
<div class="nav-logo-section">
<div id="titleText" class="title-text">
<h2>My Title</h2>
</div>
<img class="nav-logo" src="MY SOURCE">
</div>
</a>
<div id="navRight" class="nav-right">
<!-- Some content here that is irrelevant to the problem -->
</div
</nav>
<div id="irrelevant">
<div class="main-content">
<h1 class="main-title">Catchphrase</h1>
<p class="main-paragraph">Some text here</p>
</div>
<div id="box" class="box">
<!-- Some content in the box -->
</div>
</div>
CSS:
.nav-logo-section {
margin: 5px 10px 5px 30px;
float: left;
}
.nav-logo {
height: 50px;
}
.title-text {
color: #252f3f;
line-height: 0.5;
float: left;
}
.main-content {
padding: 50px 75px 0 75px;
width: calc(50% - 150px);
float: left;
}
.box {
float: right;
margin: 75px 100px 0 0;
width: 400px;
padding: 20px;
border-radius: 35px;
box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.3);
background: white;
}
第一个问题
出于某种原因, nav-logo-section
似乎影响了main-content
的 position,如下图所示( main-content
应几乎与屏幕左侧齐平):
第二个问题
第二个问题是当我删除float: left
在main-content
元素上以避免第一个问题时, box
元素没有 go 与main-content
元素并排,如下图所示:
我发现的一个可能的问题是,出于某种原因, width
似乎充当了main-content
元素中的margin
,如检查网页时所见:
我真的被困在这里,正如你所看到的,一切都有些混乱。 如果您有任何可能的解决方案,请告诉我。 谢谢
使用 flexbox 作为导航而不是浮动怎么样? 基本上你在导航中有 2 个部分,一个拉到左边,一个拉到右边,你可以使用
.nav{
display: flex,
width: 100%
justify-content: space-between
}
也许 flexbox 也可以帮助您解决第二个问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.