带有CSS网格的等宽边栏列

问题描述 投票：3回答：1

是否可以使左列和右列具有相同的宽度，而中间列占据剩余空间？我不想设置grid-template-columns: 20% 60% 20%之类的百分比，因为不能总是确定这些列的内容是什么。

Flexbox和表格似乎没有针对此问题的解决方案，因此我再次尝试使用Grid分数，但没有任何运气。

.grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr auto 1fr;
}

.col-1 {
    background-color: #FFCCCC;
    white-space: nowrap;
}

.col-2 {
    background-color: #CCFFCC;
}

.col-3 {
    background-color: #CCCCFF;
    white-space: nowrap;
}
<div class="grid">
    <div class="col col-1">This is column one</div>
    <div class="col col-2">Morbi semper accumsan odio, a interdum nisl dapibus eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque placerat urna ut finibus mollis. Morbi risus odio, pulvinar non rutrum nec, lacinia sit amet diam. Sed vitae imperdiet felis, sed gravida tortor. Maecenas a nisl ac leo finibus sollicitudin. Vestibulum non scelerisque odio, vehicula aliquam tortor.</div>
    <div class="col col-3">Column 3</div>
</div>
html css flexbox css-grid
1个回答
-1
投票

这里是一个hacky想法，其中的窍门是有一个具有两列的网格并占用容器一半的宽度。然后，将左列和右列放在彼此的上方，以确保它们相等，然后对翻译进行一些魔术处理以纠正重叠并获得所需的内容。

唯一的缺点是我们需要知道主容器的宽度。

由于我使用的是100vw，其中包括滚动的宽度，因此请在全屏上检查以下内容以获得最佳效果。

.grid {
  display: grid;
  width:50%;
  grid-gap: 20px;
  grid-template-columns: auto minmax(0,1fr);
  margin:10px 0;
}

.col-1,
.col-3{
  background-color: #FFCCCC;
  white-space: nowrap;
  grid-column:1;
  grid-row:1;
}

.col-2 {
  background-color: #CCFFCC;
  width:200%;
}

.col-3 {
  background-color: #CCCCFF;
  transform:translateX(calc(100vw - 100%));
}

body {
  margin:0;
}
<div class="grid">
  <div class="col col-1">This is column one</div>
  <div class="col col-2">Morbi semper accumsan odio, a interdum nisl dapibus eget. Orci varius natoque penatibus et magnis </div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">This is column one</div>
  <div class="col col-2">Morbi semper </div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">This is column one too long</div>
  <div class="col col-2">Morbi semper </div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">This is column one too long</div>
  <div class="col col-2">Morbi semper accumsan odio, a interdum nisl dapibus eget. Orci varius natoque penatibus et magnis </div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">..</div>
  <div class="col col-2">Morbi semper accumsan odio, a interdum nisl dapibus eget. Orci varius natoque penatibus et magnis </div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">..</div>
  <div class="col col-2">Morbi  </div>
  <div class="col col-3">Column 3</div>
</div>

下面是逐步说明，以帮助您了解其窍门：

.grid {
  display: grid;
  width:50%;
  grid-gap: 20px;
  grid-template-columns: auto minmax(0,1fr);
  margin:10px 0;
}

.col-1,
.col-3{
  background-color: #FFCCCC;
  white-space: nowrap;
  grid-column:1;
  grid-row:1;
}

.col-2 {
  background-color: #CCFFCC;
}

.col-3 {
  background-color: #CCCCFF;
  opacity:0.8;
}

body {
  margin:0;
}
<div class="grid">
  <div class="col col-1">This is column one</div>
  <div class="col col-2">Morbi semper accumsan odio, a interdum nisl</div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">This is column one</div>
  <div class="col col-2" >Morbi semper accumsan odio, a interdum nisl </div>
  <div class="col col-3" style="transform:translateX(calc(100vw - 100%));">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">This is column one</div>
  <div class="col col-2" style="width:200%;">Morbi semper accumsan odio, a interdum nisls </div>
  <div class="col col-3" style="transform:translateX(calc(100vw - 100%));">Column 3</div>
</div>
-3
投票

是的，我可以帮助您使用引导程序，这非常简单。这是代码； 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col"  style="background-color: #FFCCCC;">
                This is column one
            </div>
            <div class="col-6"   style="background-color: #CCFFCC;">
                Morbi semper accumsan odio, a interdum nisl dapibus eget. Orci varius natoque penatibus et magnis dis
                parturient montes, nascetur ridiculus mus. Quisque placerat urna ut finibus mollis. Morbi risus odio,
                pulvinar non rutrum nec, lacinia sit amet diam. Sed vitae imperdiet felis, sed gravida tortor. Maecenas
                a nisl ac leo finibus sollicitudin. Vestibulum non scelerisque odio, vehicula aliquam tortor.
            </div>
            <div class="col"  style=" background-color: #CCCCFF;">
                This is column three
            </div>
        </div>
    </div>
    </div>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.