html - 如何在没有滚动条的情况下使所有div都适合屏幕

我有大约 10 张并排对齐的图片，每张图片大小为 150x150。每张图片都保存在各自的 div 中。图片不适合屏幕。我不希望它们适合屏幕。6 张图片后，下面有 4 张图片其他 6 张图像。我希望它们全部水平对齐并适合 scrren。div 的宽度和高度与图像的大小相同

<style>

.wrapper{

     margin-left: auto;
    margin-right: auto;
    width: 100%;
    height:100%;
    overflow:hidden;
    position:relative;

.zero
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.one
    {
    margin-left:20px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;
.two
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.three
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.four
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.five
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.six
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.seven
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.eight
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.nine
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;


</style>




<body>
<div class="wrapper">

  <div class="zero">
    <img src="images/image.png"/>

    </div>

  <div class="one">
    <img src="images/image.png"/>

    </div>

    <div class="two">
    <img src="images/image.png"/>

    </div>
<div class="three">
    <img src="images/image.png"/>

    </div>
<div class="four">
    <img src="images/image.png"/>

    </div>
<div class="five">
    <img src="images/image.png"/>

    </div>
<div class="six">
    <img src="images/image.png"/>

    </div>
<div class="seven">
    <img src="images/image.png"/>

    </div>
<div class="eight">
    <img src="images/image.png"/>

 </div>
<div class="nine">
    <img src="images/image.png"/>

    </div>
</div>
</body> 
  </html>

最佳答案

您可以使用flexbox 来解决您的问题.container {display:flex;} 容器的子项将根据可用大小增长example .

在这里您可以看到添加更多图像不会创建滚动条。默认属性 flex-wrap 是 nowrap，它创建您想要的布局。

请记住，该属性不适用于旧版 IE 浏览器。

关于html - 如何在没有滚动条的情况下使所有div都适合屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30000515/

html - 如何在没有滚动条的情况下使所有div都适合屏幕

上一篇：javascript - 更改元素的 ID 不适用于 jQuery

下一篇：javascript - 根据视频大小调整 div 大小