如何将窗口划分为4列并用图像填充

Question

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

<style="heigth:100%">

在每个div中，都没有结果。我可以用颜色来做，但不能用图像。

那么，即使调整大小并用图像填充，我如何将窗口分割为4？

我也有一个导航栏，但为此，我可以将其设置为z索引=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

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

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

#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 2

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

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

Height="100%"在您的情况下不起作用，因为行高将计算为其最大子元素的100%(不是浏览器窗口！(。这就是div->这是它的子元素按钮的高度。

高度必须以px、em、rem或vh的形式指定。高度的行为与宽度不同！

---

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

---

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

<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>

*请记住：行的高度始终为此处最大的子元素的高度。

我希望这个指导方针能帮助你在这个项目和你未来的所有项目。一切顺利。