Question

我想为我的项目创建一个网格，我有一个我想要填充的div（高度和宽度）。该网格应具有响应性，适用于智能手机，平板电脑和小屏幕。

这是我想要做的一个例子：

我尝试创建第一行，但我无法理解如何管理行的高度：

<html>
<head>
<style> 

#proj1 {
    background-image: url("immobiliare.jpg");
    width:25%;
    float:left; 
    min-height: 150px;
}

#proj2 {
    background-image: url("immobiliare.jpg");
    width:25%;  
    float:left;
    min-height: 150px;
}

#proj3 {
    background-image: url("immobiliare.jpg");
    width:25%;  
    float:left; 
    min-height: 150px;
}

#proj4 {
    background-image: url("immobiliare.jpg");
    width:25%;  
    float:left; 
    min-height: 150px;  
}


</style>
</head>
<body>
<div class="contenitor-projects">
    <div class="row1-projects">
        <div id="proj1">Progetto 1</div>
        <div id="proj2">Progetto 2</div>
        <div id="proj3">Progetto 3</div>
        <div id="proj4">Progetto 4</div>
    </div>
</div>  
</body>
</html>

Answer 1

使用flex获取相同的

添加一些css我发布了一个片段

＆＃13;

.row1-projects {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}

#proj1 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

#proj2 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

#proj3 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

#proj4 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

＆＃13;

<div class="contenitor-projects">
  <div class="row1-projects">
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
  </div>
</div>

＆＃13;

第二个选项，可以根据需要填充视口。

＆＃13;

  body, html {
margin:0px;
padding: 0;
}
.contenitor-projects {

  height:100vh;
}
.row1-projects {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:row wrap;
}

#proj1 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%; /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj2 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%; /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj3 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%;  /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj4 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%;  /* add this */ 
height:calc(100vh / 3); 
margin:3px; /* add this */
}

＆＃13;

<div class="contenitor-projects">
  <div class="row1-projects">
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
  </div>
</div>

＆＃13;

使用CSS创建响应式网格（100％x 100％）

1 个答案: