漂浮时高度实际上没有变化-解网

问：

现在，我正在编写一个具有两列布局的菜单。这是代码。

HTML格式：

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>replit</title>
      <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="stockapps">
        <img src="icons/eShop.svg">
        <img src="icons/sverse.svg">
      </div>
      <div class="main">
        <p>
          Hello!
        </p>
      </div>
    </body>
    </html>

CSS：

    .stockapps {
      background-color: #111;
      float: left;
      width: 5%;
      height: 100%;
    }
    
    .stockapps :after {
      content: "";
      display: table;
      clear: both;
    }
    
    .stockapps img{
      width:100%;
      display: inline;
      vertical-align: top;
    }
    
    .main {
      float: left;
      padding: 2%;
      width: 91%;
      overflow: hidden;
    }

问题在于 stockapps div 标签没有用高度填充整个屏幕，而是选择仅填充子对象所占用的区域。

我尝试使用清除修复并将溢出设置为隐藏，但似乎都没有解决问题。这可能是一些初学者的错误，因为CSS不是我的强项

这把小提琴展示了这个问题。

html css css-float 清除修复

你的小提琴。是你试图达到的东西似乎你的代码从这里到小提琴不匹配。在你的小提琴中，你可以在你的 .wrapper 上使用 display：flex，看看这是否是你想要达到的。我只是对你想要达到的目标有点困惑。让我知道我可能会有所帮助。

0赞 Ship 5/7/2022

哎呦！我的错误，那里列出的小提琴是错误的。它现在修好了。

0赞 Crystal 5/7/2022

好的，所以你的 .stockapps{ width： 5%; } 这并不能真正适合整个屏幕。你想用这些图像做什么？？你想让它适合整个div？？关于你想要什么的插图会帮助你，或者只是更好地解释。

0赞 A Haworth 5/7/2022

在给定的代码中，您似乎试图在股票应用程序的每个子级上放置一个 after 伪元素。这可能不起作用，因为它们是 img，但您能描述一下您希望它们做什么吗？

答：

0赞 Martin Lévai 5/7/2022 #1

如果我理解正确，您需要为您的菜单创建一个 2 列布局。

为了实现这种布局，我会将和包装到另一个带有 class of 的和中，并添加以下 CSS 样式：<div class="stockapps"><div class="main"><div>manu-wrap

.menu-wrap {
    display: flex;
    justify-content: space-between;
}

然后，我将删除这些属性，您应该有一个有效的 2 列布局。float

你可以在这里找到更多关于的信息。display: flex

.container {
  display: flex; 
  align-items: stretch;
    /*Set height as you want, you can use height in px */
  height: 100vh;
}

.stockapps {
/* used background-color to show you how much height it takes*/
  background-color: #999;
  /*You can ignore width if it's not convenient for your desired final output */
  width: 50%
}

<div class="container">
  <div class="stockapps">
    <img src="icons/eShop.svg">
    <img src="icons/sverse.svg">
  </div>
  <div class="main">
    <p>
      Hello!
    </p>
  </div>
</div>

漂浮时高度实际上没有变化

Height not actually changing hieght while floating

评论

评论

评论