在css网格旁边浮动一个div

Question

我试图将一个 div 浮动到我布置的 CSS 网格的一侧。但是，它不断被推到网格下方。我试过 float 和 inline-block 都没有成功。

我想要的：

我得到了什么：

html：

<div class="body-wrapper">

    <div class="grid-wrapper">
    
        <div class="logo"><img src="Logo.png" alt="ChessHero.io Logo" width="300" height="300"></div>
        <div class="title"><h1>TITLE</h1></div>
        <div class="menu"></div>
        <div class="image"><h1>IMAGE</h1></div>
        <div class="feature"><h1>FEATURE</h1></div>
        <div class="padding"></div>

    </div>
    
    <div class="menu-div">TEST</div>
    
</div>

样式表：

body, html {
   height: 130%;
   width: 100%;
   margin: 0px;
   padding: 0px;
}

.body-wrapper {

    float:left;
    overflow:hidden;
}

.grid-wrapper {
    display: grid;
    grid-template: .5fr .5fr 2fr 2fr /repeat(10, 1fr);
    grid-template-areas: 
    "l l t t t t t t m m" 
    "p p i i i i i i m m"
    "p p i i i i i i m m" 
    "p p f f f f f f m m";

    grid-gap: 3px;
    float:left;
}

.menu-div{

   height:100vh;
   width:10%;
   background-color:green;
   float:left;
}

我读过和试过的页面：

CSS two divs next to each other

How to place two divs next to each other?

How do I align spans or divs horizontally?

非常感谢任何帮助。

Answer 1

右边的 div 没有空间，因为网格默认占用 100% 的宽度。这就是为什么它在下面。如果您为网格设置了一个宽度以留出足够的空间，那么另一个 div 将在它旁边浮动。

但是，您说要使用 position:fixed，无论如何这与 float 不兼容。所以只需添加 position:fixed; top:0; right:0; ，它就会粘在右上角。然后您可以从网格（和包装器）中移除浮动，并减少网格的宽度，使其不会与固定的 div 重叠。