我如何将 window 分成 4 列并用图像填充

Question

我试图将其分为 4 列，但这永远不会奏效。 我试过全高，

<style="heigth:100%">

在每个 div 中，没有任何结果。 我可以用 colors 做到这一点，但不能用图像。

那么，如何将 window 分成 4 部分，即使调整大小并填充图像？

我也有一个导航栏，但为此我可以将它与 z-index=1 一起放置并使其可见。

 #index1 { background: url('img/WhatsApp Image 2022-01-24 at 17.07.09.jpeg'); position: relative; } #index2 { background: url('img/WhatsApp Image 2022-01-24 at 17.07.08.jpeg'); position: relative; } #index3 { background: url('img/WhatsApp Image 2022-01-24 at 17.07.08(1).jpeg'); position: relative; } #index4 { background: url('img/WhatsApp Image 2022-01-24 at 17.07.08(2).jpeg'); position: relative; }

 <div class="row col-md-12" style="width:100%; height:100%"> <div class="col-md-3" id="index1"><input type="button" class="btn btn-outline-info" onclick="myFunction1()" value="Calendar" /></div> <div class="col-md-3" id="index2"><input type="button" class="btn btn-outline-info" onclick="myFunction2()" value="Classifications" /></div> <div class="col-md-3" id="index3"><input type="button" class="btn btn-outline-info" onclick="myFunction3()" value="Winner-Driver" /></div> <div class="col-md-3" id="index4"><input type="button" class="btn btn-outline-info" onclick="myFunction4()" value="Winner-Constructor" /></div> </div>

Answer 1

您可以使用Grid Layout来执行此操作。

首先，将display: grid设置为对所有列进行分组的容器。 之后，您可以使用grid-template-columns: 1fr 1fr 1fr 1fr; .

这样，您将拥有 4 列，每列的宽度都相等。

出于示例的目的，我将min-height设置为100vh ，以便您可以正确查看viewport中的列。 我还使用了在 Google 上找到的图片。

这是关于Grid Layout的完整文档： CSS 网格布局

这是示例：

 #index1 { background: url('https://img-19.ccm2.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg'); position: relative; } #index2 { background: url('https://img-19.ccm2.net/cI8qqj-finfDcmx6jMK6Vr-krEw=/1500x/smart/b829396acc244fd484c5ddcdcb2b08f3/ccmcms-commentcamarche/20494859.jpg'); position: relative; } #index3 { background: url('https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80'); position: relative; } #index4 { background: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg'); position: relative; }.container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; min-height: 100vh; }

 <div class="container"> <div class="inner" id="index1"><input type="button" class="btn btn-outline-info" onclick="myFunction1()" value="Calendar" /></div> <div class="inner" id="index2"><input type="button" class="btn btn-outline-info" onclick="myFunction2()" value="Classifications" /></div> <div class="inner" id="index3"><input type="button" class="btn btn-outline-info" onclick="myFunction3()" value="Winner-Driver" /></div> <div class="inner" id="index4"><input type="button" class="btn btn-outline-info" onclick="myFunction4()" value="Winner-Constructor" /></div> </div>

Answer 2

您可以使用Bootstrap flex类设置 flex 布局和 alignment。

一个问题是您的按钮不适合较小的屏幕。 您可能希望对移动设备使用垂直堆栈，而对大屏幕使用行。

 #index1 { background: url('https://via.placeholder.com/800'); } #index2 { background: url('https://via.placeholder.com/800/dddddd'); } #index3 { background: url('https://via.placeholder.com/800'); } #index4 { background: url('https://via.placeholder.com/800/dddddd'); }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="d-flex vw-100 vh-100"> <div class="w-25 flex-column d-flex justify-content-center align-items-center" id="index1"> <input type="button" class="btn btn-outline-info" onclick="myFunction1()" value="Calendar" /> </div> <div class="w-25 flex-column d-flex justify-content-center align-items-center" id="index2"> <input type="button" class="btn btn-outline-info" onclick="myFunction2()" value="Classifications" /> </div> <div class="w-25 flex-column d-flex justify-content-center align-items-center" id="index3"> <input type="button" class="btn btn-outline-info" onclick="myFunction3()" value="Winner-Driver" /> </div> <div class="w-25 flex-column d-flex justify-content-center align-items-center" id="index4"> <input type="button" class="btn btn-outline-info" onclick="myFunction4()" value="Winner-Constructor" /> </div> </div>

Answer 3

默认情况下，任何<div>的高度=0。 如果 div 中有元素，它可以展开。 但它不会随着<div>的背景图像的大小而扩展。

您的代码是完美的，只是您没有在相应的<div>元素中指定高度。 您必须为每个包含背景的 div 指定高度。 否则浏览器会将其设置为 height=0 或在本例中为按钮的高度。

Height='100%' 在您的情况下不起作用，因为行高将计算为其最大子元素的 100%（不是浏览器 window。）。 那是 div -> 这是它的子元素按钮的高度。

高度必须指定为 px、em、rem、vh。 高度不像宽度！

---

最简单的解决方案：将行高设置为 100vh 而不是 100%

---

如果要设置每个 div 的高度，可以通过向它们添加 height 或 min-height 属性来实现。 尝试尝试不同的值。
**提示：您可以通过浏览器的代码检查器检查您的 div 大小（在 windows 中：鼠标右键单击并检查）

---

<style>
    #index1 {
      background: url('https://source.unsplash.com/1600x900/?fire');
      position: relative;
      height: 90vh; //Experiment here
    }

    #index2 {
      background: url('https://source.unsplash.com/1600x900/?beach');
      position: relative;
      height: 500px; //Experiment here
    }

    #index3 {
      background: url('https://source.unsplash.com/1600x900/?team');
      position: relative;
      min-height: 100vh; //Experiment here
    }

    #index4 {
      background: url('https://source.unsplash.com/1600x900/?love');
      position: relative;
      min-height: 50vh; //Experiment here
    }
  </style>

Html：

 <div class="container-fluid">
    <div class="row col-md-12">
      <div class="col-md-3" id="index1"><input type="button" class="btn btn-outline-info" onclick="myFunction1()"
          value="Calendar" /></div>
      <div class="col-md-3" id="index2"><input type="button" class="btn btn-outline-info" onclick="myFunction2()"
          value="Classifications" /></div>
      <div class="col-md-3" id="index3"><input type="button" class="btn btn-outline-info" onclick="myFunction3()"
          value="Winner-Driver" /></div>
      <div class="col-md-3" id="index4"><input type="button" class="btn btn-outline-info" onclick="myFunction4()"
          value="Winner-Constructor" /></div>
    </div>
  </div>

*请记住：该行将始终具有此处最大子元素的高度。

我希望本指南能在这个项目和你未来的所有项目中对你有所帮助。 一切顺利。