时间戳

首页 > 解决方案 > CSS：如何以一列覆盖另一列的方式组织两列？

html - CSS：如何以一列覆盖另一列的方式组织两列？

问题描述

我希望将页面分成两列，其中一列应覆盖另一列。我一直无法做到这一点，所以我请大家帮忙。请忽略凌乱的 svg 代码，它是从 inkscape 复制的，因为我想在其中包含一些可点击的元素。

第一/左列（测试列）仅在有要迭代的列表时出现，否则隐藏。我在下面的脚本中使用的 flexbox 解决方案的问题是，当第一列出现时，第二列是偏移的。我希望它只出现在黑色方块周围区域的页面“上方”，而不移动任何其他元素。我怎么能做到这一点？

.svg_container {
    width: 100%;
    background: #fff;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    border: 2px solid pink;
}

.test {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.svg {
    width: 100%;
    flex: 5;
    height: 90vh;
}
<html>
<body>
<main>
  <div class="svg_container">
    <div class="row">
      <div class="test column">
        <p>List Header</p>
        <p>Elem 1</p>
        <p>Elem 2</p>
        <p>Elem 3</p>
        <p>Elem 4</p>
        <p>Elem 5</p>
      </div>
      <svg 
           viewBox="0 0 219.64919 197.34595"
           height="197.34595mm"
           width="219.64919mm"
        class="svg column">
        <g transform="translate(-4.3242022,-42.81862)" id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
          <g
               transform="matrix(0.26458333,0,0,0.26458333,-52.392597,15.930767)"
               id="g768">
            <g id="group1780-42" transform="translate(317.239,-185.674)"   >
              <title id="title2168">Square</title>
                <g id="shape1781-43"  >
                  <title id="title2170">Square</title>
                  <path d="M 0,841.89 H 559.56 V 348.66 H 0 Z" class="st3" id="path2172" />
                  <text x="253.13" y="401.75" class="st4"  id="text2176">Laboratory
                    <tspan x="257.67999" dy="1.2em" class="st5" id="tspan2174">86 sq. m.</tspan>
                  </text>
                </g>                    
            </g>
          </g>
                </g>
      </svg>
    </div>
  </div>
</main>
</body>
</html>

代码也保存为jsfiddle

下图是我所拥有的（正方形稍微向右偏移）： 是）我有的

虽然这是我想要的（列表不偏移正方形）： 没有清单 我想要的是

标签： htmlcsscss-multicolumn-layout

解决方案

由于您希望侧边栏“覆盖”它需要具有的 svg 区域（内容）position: absolute。这是一个例子：

function toggle () {
  const sidebar = document.querySelector('.test.column');
  sidebar.classList.toggle('hide');
}
html, body, main {
  height: 100vh;
}
.svg_container {
    width: 100%;
    background: #fff;
    height: 100%;
}

.test.column {
    background-color: gray;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    border: 2px solid pink;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 200px;
}

.column.hide {
  display: none;
}

.content {
  background-color: teal;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svg {
    width: 100%;
    flex: 5;
    height: 90vh;
}
<html>
<body>
<main>
  <div class="svg_container">
      <div class="test column">
        <p>List Header</p>
        <p>Elem 1</p>
        <p>Elem 2</p>
        <p>Elem 3</p>
        <p>Elem 4</p>
        <p>Elem 5</p>
      </div>
      <div class="content">
        <button onclick="toggle()"> Show/Hide </button>
      </div>
    </div>
  </div>
</main>
</body>
</html>

推荐阅读