在调整大小窗口时，请防止弹性箱相对元素被移动

发布于 2025-02-13 01:07:03 字数 1887 浏览 0 评论 0原文

如何防止“大约”部分（FlexContainer Div）被标头元素移动？

我在标题元素，标题和导航栏与“大约”部分之间有距离。调整窗口大小后，当元素之间仍然存在空间时，“大约”部分就会移动。

HTML代码：

<body style="background-image: url(#); background-color: #a6afbe;">
    <header>
        <h1>Haruhi Suzumiya 3D School</h1>
        <nav>
            <ul class="nav-list">
                <li><a class="noselect" href="#">Home</a></li>
                <li><a class="noselect" href="#">About</a></li>
                <li><a class="noselect" href="#">Pictures</a></li>
                <li><a class="noselect" href="#">Contact</a></li>
                <li><a class="noselect"
                        href="#"</a></li>
            </ul>
        </nav>
    </header>

    <div class="flexcontainer" style="top: 30rem">
        <section>
            <h2>About</h2>
            <article>
                <p class="main">
                  texttexttext
                </p>
                <img src="#" alt="">
            </article>
        </section>
    </div>
</body>

CSS Syle：

.flexcontainer {
  top: inherit;
  display: -webkit-flex;
  display: flex;
  position:relative; 
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  justify-content: center;
  
}

header {
  display: flex;
  flex-flow: row wrap;
  flex-direction: column;
  justify-content: center;
}

插图显示不移动时的外观： element> element不移动

插图显示了调整和移动时的外观：正在移动

原文

How can I prevent the "about" section (flexcontainer div) from being moved by the header element?

I have a distance between the header element, a title and nav bar, and the "about" section. Upon resizing the window, the "about" section gets moved, when there is still space inbetween the elements.

HTML Code:

<body style="background-image: url(#); background-color: #a6afbe;">
    <header>
        <h1>Haruhi Suzumiya 3D School</h1>
        <nav>
            <ul class="nav-list">
                <li><a class="noselect" href="#">Home</a></li>
                <li><a class="noselect" href="#">About</a></li>
                <li><a class="noselect" href="#">Pictures</a></li>
                <li><a class="noselect" href="#">Contact</a></li>
                <li><a class="noselect"
                        href="#"</a></li>
            </ul>
        </nav>
    </header>

    <div class="flexcontainer" style="top: 30rem">
        <section>
            <h2>About</h2>
            <article>
                <p class="main">
                  texttexttext
                </p>
                <img src="#" alt="">
            </article>
        </section>
    </div>
</body>

CSS Syle:

.flexcontainer {
  top: inherit;
  display: -webkit-flex;
  display: flex;
  position:relative; 
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  justify-content: center;
  
}

header {
  display: flex;
  flex-flow: row wrap;
  flex-direction: column;
  justify-content: center;
}

Illustration displaying how it looks when not being moved:
Element not moved

Illustration displaying how it looks when being resized and moved:
Element being moved

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

羁绊已千年 2025-02-20 01:07:03

关于“ TORE =” TOP：30REM。您应该删除您的内联样式属性，并在主CSS文件中使用媒体查询作为“ FlexContainer”类。我对任何与未来网页相关的项目的建议是首先构建网站

。

@media screen and (max-width: 1000px){
   top: 30rem
}

@media screen and (max-width: 500px){
   top: 20rem
}

@media screen and (max-width: 300px){
   top: 15rem
}

The about section is moving away from the top thanks to style="top: 30rem. You should remove your inline style attribute and use a media query in the main css file for your "flexcontainer" class. My suggustion for any future webpage related projects is to build the site mobile first.

e.g:

@media screen and (max-width: 1000px){
   top: 30rem
}

@media screen and (max-width: 500px){
   top: 20rem
}

@media screen and (max-width: 300px){
   top: 15rem
}

回复收藏 0 原文

中二柚 2025-02-20 01:07:03

我找到了解决方案！我在标头上使用了绝对定位。

代码：

<body style="background-image: url(#); background-color: #a6afbe;">
    <div class="flexcontainer">
        <header>
            <h1>Haruhi Suzumiya 3D School</h1>
            <nav>
                <ul class="nav-list">
                    <li><a class="noselect" href="#">Home</a></li>
                    <li><a class="noselect" href="#">About</a></li>
                    <li><a class="noselect" href="#">Pictures</a></li>
                    <li><a class="noselect" href="#">Contact</a></li>
                    <li><a class="noselect" href="#">Wiki</a></li>
                </ul>
            </nav>
        </header>

        <section  style="top: 45rem" >
            <h2>About</h2>
            <article>
                <p class="main">
                  texttexttext
                </p>
                <img src="#" alt="">
            </article>
        </section>
    </div>
</body>

CSS：

.flexcontainer {
  position: relative; 
  top: inherit;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
  text-align: center;
  font-weight: bold;
}

header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
}

未移动的说明：不动

在重新调整时不会移动：在此处输入图像描述

I found a solution! I used absolute positioning on the header.

Code:

<body style="background-image: url(#); background-color: #a6afbe;">
    <div class="flexcontainer">
        <header>
            <h1>Haruhi Suzumiya 3D School</h1>
            <nav>
                <ul class="nav-list">
                    <li><a class="noselect" href="#">Home</a></li>
                    <li><a class="noselect" href="#">About</a></li>
                    <li><a class="noselect" href="#">Pictures</a></li>
                    <li><a class="noselect" href="#">Contact</a></li>
                    <li><a class="noselect" href="#">Wiki</a></li>
                </ul>
            </nav>
        </header>

        <section  style="top: 45rem" >
            <h2>About</h2>
            <article>
                <p class="main">
                  texttexttext
                </p>
                <img src="#" alt="">
            </article>
        </section>
    </div>
</body>

CSS:

.flexcontainer {
  position: relative; 
  top: inherit;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
  text-align: center;
  font-weight: bold;
}

header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
}

Illustration of not being moved: not being moved

Illustation of not being moved when resizing: enter image description here

回复收藏 0 原文

~没有更多了~