问在调整窗口大小时防止挠曲盒相对元素被移动
EN

Stack Overflow用户

提问于 2022-07-05 01:59:01

回答 2查看 50关注 0票数 0

如何防止标题元素移动"about“部分(柔性容器div)？

我有一个距离的标题元素，标题和导航栏，和“关于”部分。在调整窗口大小时，当元素之间仍然有空格时，"about“部分就会被移动。

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;
}

显示未移动时的外观的插图：元素未移动

显示调整大小和移动时的外观的插图：正在移动的元素

flexbox

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-07-05 02:55:51

我找到了解决办法！我在头上使用了绝对定位。

代码：

<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;
}

未被移动的说明：不动

调整大小时未被移动的插图：在这里输入图像描述

票数 0

Stack Overflow用户

发布于 2022-07-05 02:14:17

由于style=" top : 30 from“，您应该删除inline属性，并在主css文件中为您的”柔性容器“类使用一个媒体查询。我对今后任何与网页相关的项目的建议是首先构建移动站点。

例如：

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

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

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