如何解决横向创建Flexbox容器
我试图一个接一个地创建2个flexbox容器,我应用了许多类组合来完成这项工作。创建了Flexbox,但是当我滚动时,下部的将低于上部的。输出如下所示:Current Scenario Output。
我的要求是,无论滚动如何,都要固定那两个水平条,一个接一个地固定。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'personal/mystyles.css' %}">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center pt-1 px-md-4 mb-3 border-bottom shadow-sm sticky-top" style="background-color: #80ccff;">
<h5 class="my-0 mr-md-auto font-weight-normal">
<p>Hello,User </p>
</h5>
<nav class="my-0 my-md-0 mr-md-3">
<a class="p-2 text-dark" href=""><b>Home</b></a>
<a class="p-2 text-dark" href=""><b>Account</b></a>
<a class="p-2 text-dark" href=""><b>Logout</b></a></p>
</nav>
</div>
<!--This div will be used in different html file and first div will be included using 'include' keyword of django. -->
<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa;"></div>
</body>
</html>
解决方法
您可以像这样更改第二个水平条并添加一些CSS:
<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa; position: fixed; width: 100%; margin-top: 50px"></div>
,
将2个divs
并排包装在div
内并将其制成flex
<body>
<div class="d-flex">
<div>...</div> // your first div
<div>...</div> // your second div
<div>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。