CSS Flexcontainer在Flex包装后不够高

发布于 2025-02-08 10:12:36 字数 1517 浏览 3 评论 0原文

该页脚具有flexcontainer（id =“ footerline”），其flex包装属性设置为包装。该容器包含两个Divs（类=“ FooterButton”）。当包装在小屏幕上发生时，第二个容器移至新线路，但是容器的高度没有调整，因此两条线重叠。我可以通过删除两个Divs中的按钮的填充来解决此问题，但这显然不是我想做的。

那么，我该怎么做才能确保Flexcontainer在包装后具有正确的高度（当然，在包装之前，但这不是问题）？将容器的高度设置为100px之类的东西是一个选择，因为我希望容器足够高以容纳内容，无论是否包装。

我研究了有关类似情况及其答案的许多其他问题，但是我从中产生的所有实验对我而言无济于事。

谢谢。

马尔特

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
             #footerline {display:flex; justify-content: space-around; flex-wrap: wrap;
               padding: 20px; width: 100%; background: #132a40}
            .footerbutton a {color:whitesmoke; padding: 20px; margin-left:10px; 
               text-decoration: none; background-color: green}
    </style>
</head>

<body>
        <footer>
            <div id="footerline">
                <div class="footerbutton">
                    <a href="Imprint.html">Imprint -- Cookies -- Privacy</a>
                </div>
                <div>
                    <nav class="footerbutton">
                        <a href="english.html">English</a>
                        <a href="swedish.html">Swedish</a>
                        <a href="german.html">German</a>
                    </nav>
                </div>
            </div>
        </footer>
</body>
</html>

原文

This footer has a flexcontainer (id="footerline") whose flex-wrap property is set to wrap. The container contains two divs (class="footerbutton"). When wrapping takes place on small screens, the second container moves to a new line, but the container's height does not adjust, so the two lines overlap. I could fix this by removing the padding of the buttons in the two divs, but this is clearly not what I would like to do.

So what can I do to make sure the flexcontainer has just the right height after wrapping (and before wrapping, too, of course, but that is not the problem)? Setting the height of the container to something like 100px is not an option as I wish the container to be just high enough to contain the content, be it wrapped or not.

I have studied numerous other questions about similar situations and their answers, but all my experiments that resulted from this did not help in my case.

Thank you.

Malte

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
             #footerline {display:flex; justify-content: space-around; flex-wrap: wrap;
               padding: 20px; width: 100%; background: #132a40}
            .footerbutton a {color:whitesmoke; padding: 20px; margin-left:10px; 
               text-decoration: none; background-color: green}
    </style>
</head>

<body>
        <footer>
            <div id="footerline">
                <div class="footerbutton">
                    <a href="Imprint.html">Imprint -- Cookies -- Privacy</a>
                </div>
                <div>
                    <nav class="footerbutton">
                        <a href="english.html">English</a>
                        <a href="swedish.html">Swedish</a>
                        <a href="german.html">German</a>
                    </nav>
                </div>
            </div>
        </footer>
</body>
</html>

分享到QQ

分享到微博

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

发布评论

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

夢归不見 2025-02-15 10:12:36

请在CSS中使用CSS中的页脚底部，

如果您在WebView中不需要，

.footerbutton a {
color: whitesmoke;
padding: 20px;
margin-left: 10px;
text-decoration: none;
background-color: green;
margin bottom: 50px;
}

只需在媒体查询中添加它即可。如果在WebView的位置不需要，则在媒体查询中的marginbottom

Please use footer bottom in css for Footerbutton

if you dont needed in Webview just add it in Media query.

.footerbutton a {
color: whitesmoke;
padding: 20px;
margin-left: 10px;
text-decoration: none;
background-color: green;
margin bottom: 50px;
}

if not needed in WebView place that Marginbottom in media query

回复收藏 0 原文

盛装女皇 2025-02-15 10:12:36

检查有完整的代码显示：flex问题。如果您想在移动设备中的空间添加媒体查询移动设备。

#footerline {
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  background: #132a40;
}
.footerbutton{
  display:flex;
}
.footerbutton a {
  color:whitesmoke;
  padding: 20px;
  margin-left:10px; 
  text-decoration: none;
  background-color: green;
  
}
#footerline > div {
  display: flex;
}

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body>
        <footer>
            <div id="footerline">
                <div class="footerbutton">
                    <a href="Imprint.html">Imprint -- Cookies -- Privacy</a>
                </div>
                <div>
                    <nav class="footerbutton">
                        <a href="english.html">English</a>
                        <a href="swedish.html">Swedish</a>
                        <a href="german.html">German</a>
                    </nav>
                </div>
            </div>
        </footer>
</body>
</html>

Check there are full code display: flex issues here. if you want space in a mobile device add media query for mobile.

#footerline {
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  background: #132a40;
}
.footerbutton{
  display:flex;
}
.footerbutton a {
  color:whitesmoke;
  padding: 20px;
  margin-left:10px; 
  text-decoration: none;
  background-color: green;
  
}
#footerline > div {
  display: flex;
}

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body>
        <footer>
            <div id="footerline">
                <div class="footerbutton">
                    <a href="Imprint.html">Imprint -- Cookies -- Privacy</a>
                </div>
                <div>
                    <nav class="footerbutton">
                        <a href="english.html">English</a>
                        <a href="swedish.html">Swedish</a>
                        <a href="german.html">German</a>
                    </nav>
                </div>
            </div>
        </footer>
</body>
</html>

回复收藏 0 原文

人生戏 2025-02-15 10:12:36

我照顾你的代码。据我了解，您对Flex的方法无法正常工作。我建议在您的主要页脚线div中添加属性的最小值min-height：200px。此外，Flex仅包装页脚内部的两个div元素。您需要显示：flex和flex-wrap：wrap to foterline div中的两个div元素。尝试此解决方案，希望这会有所帮助。

回复收藏 0 原文