时间戳

首页 > 解决方案 > 容器中具有不同背景的两列

html - 容器中具有不同背景的两列

问题描述

我对 bulma 容器的特定布局有疑问。我想在一个容器内显示一个包含两列的布局，左侧背景部分必须是灰色和右侧白色。我需要将列包装在容器内以获取大小和断点。

.container{
  min-height: 100vh
}

.left{
  background-color: lightgray;  
  min-height: 100vh
}

.right{
  background-color: white; 
  min-height: 100vh
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<nav class="navbar has-background-grey-dark">
  <div class="container">
<div class="navbar-brand">
  <a class="navbar-item" href="https://bulma.io">
    <img src="https://bulma.io/images/bulma-logo-white.png" width="112" height="28">
  </a>
</div>
<div class="navbar-menu">
  <div class="navbar-start">
    <a class="navbar-item">
      Home
    </a>
  </div>

  <div class="navbar-end">
    <div class="navbar-item">
      <div class="buttons">
        <a class="button is-primary">
          <strong>Sign up</strong>
        </a>
      </div>
    </div>
  </div>
</div>
  </div>
</nav>

<div class="container">
  <div class="columns">
<div class="column is-9 left">
  Left
</div>
<div class="column">
  Right
</div>
  </div>
</div>

你可以看到我在这里工作：https ://codepen.io/hans-felix/pen/GRqKeYe

当前结果：

当前结果

预期结果：

预期结果

如您所见，我使用容器来对齐项目。
我该如何处理这个设计？

标签： htmlcssbulma

解决方案

Flex 应该对此有所帮助。 https://developer.mozilla.org/en-US/docs/Web/CSS/flex 也许你甚至不需要“容器”DIV。

.columns {
  display: flex;
  width: 100%;
}

.column {
  flex: 1;
}

.left {
  background-color: lightgray;
  min-height: 100vh;
}

.right {
  background-color: white;
  min-height: 100vh;
  flex: unset;
  width: 100px;
}
<div>
  <div>Your header stuff here ... ... ... ... ... ... ... ... ... ... .. .... .. .. . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  </div>
  <div class="columns">
    <div class="column is-9 left">
      Left
    </div>
    <div class="column right">
      Right
    </div>
  </div>
</div>

推荐阅读