Question

因此，在下图中，我为侧边栏，主要区域创建了一个弹性框，然后在右侧创建了一个小区域作为登录区域。

左侧第一个侧边栏的固定高度为600px，中间的主要区域高度为100vh，右侧边栏的固定高度为200px。

我的问题是，是否可以在绿色下方填充右侧的空白区域，主区域内容为flexbox。这是可能的，还是flexbox不适合这种布局？

我基本上希望我的主要区域内容红色内容在绿色区域下方流动。

＆＃13;

.main {
  display: flex;
  flex-wrap: wrap;
  border: 0px solid black;
  height: 100vh;
}

.sidebar {
  background: #F1F1F9;
  flex: 1;
  height: 600px;
}

.mainArea {
  flex: 3;
  background: red;
}

.rightSidebarSmall {
  flex: 1;
  background: green;
  height: 200px;
}

＆＃13;

<link href="//fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">

<div class="main">
  <div class="sidebar">
    <div class="logo">
      <img src="img/sound-wave-icon.png" height="100px" width="140px">
    </div>
    <div class="selectorBar">
    </div>
    <div class="menu">
      <ul class="menuOptions">
        <li>Recent Files</li>
        <li>Projects</li>
        <li>Teams</li>
        <li>Archives</li>
      </ul>
    </div>
    <div class="addButton">
      plus icon button
    </div>
    <div class="progressBar">
      uploading 5 files <br> progressBar <br> 9.8mbps 36 secs remaining
    </div>
  </div>
  <div class="mainArea"></div>
  <div class="rightSidebarSmall"></div>
</div>

＆＃13;

Answer 1

使用CSS Grid是最简单的方法，因为你要的布局是非常不正统的。话虽如此，我能够得到一个我认为适合你的描述的布局，我把它放在笔中。

https://codepen.io/anon/pen/bLjNRO

它的要点是：

.main {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.mainArea {
    grid-column: 1 / 6;
    grid-row: 1;
}
.rightSidebarSmall {
    grid-column: 5 / 6;
    grid-row: 1;
}

Answer 2

我认为如果你能让右侧边栏位于绝对位置会更好。这样你的主要（红色的arean）将被覆盖，绿色区域将在红色区域重叠

＆＃13;

.main {
display: flex;
flex-wrap: wrap;
border: 0px solid black;
height: 100vh;
position:relative;
}
.sidebar {
background: #F1F1F9;
flex: 1;
height: 600px;
}
.mainArea {
flex: 3;
background: red;

}
.rightSidebarSmall {
  position:absolute;
  right:0;
  top:0;
  z-index: 10;
  min-width:100px;
  height:200px;
  background:green;
}

＆＃13;

<div class="main">
    <div class="sidebar"></div>
    <div class="mainArea"></div>
    <div class="rightSidebarSmall"></div>
</div>

＆＃13;

希望它会对你有所帮助:)。

Answer 3

当然，只需使用float: right只需确保浮动div位于文本的其余部分之前。

.main {
  width: 50vw;
  height: 50vh;
  position: relative;
}

.inner {
    background-color: red;
    float: left;
    width: 100%;
    height: 100%;
    word-break: break-all;
}

.other {
  background-color: green;
  float: right;
  max-width: 150px;
}

<div class="main">
  <div class="inner">
       <div class="other">
        another text asdfsdf asdf asdf
      </div>  
      <div>
      The quick brown fox       The quick brown fox       The quick brown fox      
      </div>


  </div>

</div>

FlexBox填充空格

3 个答案: