Question

当屏幕缩放时，我正在努力使右边的大图像与其他项目在视觉上对齐。

如果可以使用Flexbox或网格，我可以使用它只是不确定如何使用这些工具实现这一点。

由于

 public JsonResult ProductAutocompleteByCode(string code)
    {
        var products = Json(db.Products.Where(p => p.code.Contains(code)).Select(p => new ProductDTO { Id = p.id, Code = p.code, Name = p.name, Price= p.price }));

        return Json(products.Data, JsonRequestBehavior.AllowGet);
    }

https://codepen.io/qwerty-design/pen/PQVzaL?editors=1100

Answer 1

可以通过多种方式实现其中一种方法是使用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>

使图像双倍高度的兄弟（难以主题）

1 个答案: