使图像双倍高度的兄弟（难以主题）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使图像双倍高度的兄弟（难以主题）相关的知识，希望对你有一定的参考价值。
当屏幕缩放时，我正在努力使右侧的大图像与其他项目在视觉上对齐。
如果可以使用Flexbox或网格，我只是不确定如何使用这些工具实现这一点。
谢谢
<section class="content-wrap sleep-smart">
<div class="col-1-of-3 fold">
<a href="#">
<img class="sleep-smart__img sleep-smart__img--beds" src="http://qwerty-demos.co.uk/img/folding-beds.jpg" alt="xxx">
<div class="sleep-smart__title-box">
<h3 class="sleep-smart__h3">Folding Beds</h3>
<span class="sleep-smart__faux-link">Discover<br>More</span>
</div>
</a>
</div>
答案
它可以通过多种方式实现，其中之一就是使用CSS网格。你可以找到一个很好的指南here和here
要使html元素表现为网格容器，您必须将display属性设置为grid或inline-grid。网格容器由网格项组成，放置在列和行中。
.grid-container {
/*Must set display to grid or inline-grid*/
display: grid;
/*Define number of columns and column width*/
/*Here we define 3 columns each of which is 33% of its parent width*/
/*You can set each column with different width e.g.(100px, 200px, 50px)*/
grid-template-columns: repeat(3, 33%);
/*Define number of rows and row height*/
/*Here we define 2 rows each of which is 100px*/
grid-template-rows: repeat(2, 100px);
/*Spaces between columns*/
grid-column-gap: 10px;
/*Spaces between rows*/
grid-row-gap: 10px
}
/*Just for demo*/
.item-1,
.item-2,
.item-3,
.item-4,
.item-5 {
background-color: #333;
color: #fff
}
/*For each item, select its position you can think of it as a table and point to each cell with (row,col)*/
.item-1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.item-2 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.item-3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.item-4 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.item-5 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}<div class="grid-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
</div>以上是关于使图像双倍高度的兄弟（难以主题）的主要内容，如果未能解决你的问题，请参考以下文章