Question

在我的网站上，我想要有6个图像框＆＃39; （3在一行＆＃39;行＆＃39;以及3在＆＃39;行＆＃39;）。当我更改屏幕/标签的大小时，应始终完全看到这6个图像框。它们应始终适合屏幕尺寸。我的代码以某种方式工作，但不是在底部。在减少一定量后的屏幕尺寸后，只能看到第二行中的一部分卡片。

此外，我希望我的内容能够在没有滚动条的情况下占据屏幕的100％。

网页内容分为两部分：顶部布局和图像框。

这基本上是我的css文件：

* {
font: 18px Verdana;
font-size: 22px; 
}

html{
 height: 100%;
}

body {
font: 18px Verdana;
height: 100%;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-top: 30px;
overflow: hidden;
}

#topLayout {
height: 190px;
margin-bottom: 10px;
}


#imagebox {
height: 80%;
margin-bottom: 0px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.box{   
cursor: pointer;
flex: 0 1 32.5%;
margin-top: 1.2%;
}

这是我的HTML代码：

<body>

 <div id="topLayout">   

    <div id="block1">
    .....
    </div>

    <div id="block2">
    ....
    </div>

 </div>

 // the images are appended to the imagebox tag in the .js file via a 
  function

<div id="imagebox"></div>

</div>

非常感谢你。

Answer 1

也许它可以帮到你。试试这个

#imagebox {
 position: absolute;
 width: 100%;
 top: 230px;
 bottom: 0;
 left: 30px;
 right: 30px;
}

这是example

调整大小时如何使完整内容适合屏幕

1 个答案: