时间戳

首页 > 解决方案 > 网格内另一个 div 内的 div 的响应性

html - 网格内另一个 div 内的 div 的响应性

问题描述

我正在尝试对父 div 内的多个 div 进行完全响应，并且在具有 class="col-md-6" 的网格视图中有多个类似类型的父 div。我尝试减小图像宽度和字体大小，但没有任何事情发生。我希望它在我们减小屏幕尺寸时自动调整元素，保持值完全可见。我在下面的屏幕截图中分享了代码和问题。

CSS

.games-table{
    padding: 30px;
}

.gameRow{
    box-shadow: 0px 0px 6px 0px;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
.gameRow:hover{
    box-shadow: 0px 0px 15px 0px;

}
.gameNo{

    margin-bottom: 0px;
}
.gameNo, .imgBox, .courtBox{
    text-align: center;
}

li{
    list-style-type: none;
}
.imgteam1, .imgteam2{
    width: 48px;
    height:auto;
}
.gamenum-box{
    background-color: #000066;
    color: #ffffff;

}
.gamenum-box, .imgBox, .courtBox{
    padding: 20px 20px;
}
.datetimeBox{
    padding: 5px 5px;
}
.vs-span{
    margin: 0px 10px;
}
th,td{
    padding: 0px 10px;
}
th{
    border-bottom: 1px solid #cccccc;
}
.datetimeBox{
    color: #000000;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to top, #cccccc, rgba(0, 0, 0, 0) ) 1 100%;
    background-image: linear-gradient(80deg, #f1f1f1 , white, #f1f1f1);
    transform: skew(-10deg, 0deg);
}
table{
    transform: skew(10deg, 0deg);
    width: 100%;
}

#games{
    z-index:0;
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}
.newDiv{
    width:50%;

}
.gamenum-box, .courtBox {
    width: 20%;
}
.datetimeBox{
    width:30%;
}
.imgBox{
    width:30%;
}
.gameVis{
    display: none;
}

@media only screen and (max-width:600px){
    .games-table{
        padding:10px;
    }
    .newDiv{
        width:100%;

    }

    .imgteam1, .imgteam2{
        width: 27px;
    }
    .gamenum-box, .imgBox, .courtBox{
        padding: 16px 1px;
    }
    th,td{
        padding: 0px 1px;
    }

}
@media only screen and (max-width:480px){
    .games-table{
        padding: 5px;
    }
    /* .gameNoVis{
        display: none;
    }
    .gameVis{
        display: block;
    } */
    .gamenum-box{
        width: 13%;
    }
    .imgBox{
        width: 32%;
    }
    .datetimeBox{
        width: 40%;
    }
    .courtBox {
        width: 15%;
    }
}

代码

<div class="game-table">
    <div class="container-fluid">
        <div class="row">  
            <div class="col-12">
                <div class="head mb-4">
                    <h2>Matches</h2>
                </div>
            </div>

        </div>
        <div class="row">  
            <!-- Start Games Section -->
            <div class="col-xs-12 col-md-6 col-sm-12 col-lg-6">
                        <div id="games">
                        <div class="row gameRow">
                            <div class="gamenum-box col-md-2">
                                <p class="gameNo">GAME</p>
                                <p class="gameNo">1</p>
                            </div>
                            <div class="imgBox col-md-4">
                                <img src="../assets/images/games/team1.png" class="imgteam1">
                                <span class="vs-span">VS</span>
                                <img src="../assets/images/games/team2.png" class="imgteam2">
                            </div>
                            <div class="datetimeBox col-md-4">
                                <table>
                                    <tr>
                                        <th><b>Date</b></th>
                                        <th><b>Time</b></th>
                                    </tr>
                                    <tr>
                                        <td><b>12 Jan 2019</b></td>
                                        <td><b>12:00PM</b></td>
                                    </tr>
                                </table>                                 
                            </div> 
                            <div class="courtBox col-md-2">
                                <p class="gameNo">COURT</p>
                                <p class="gameNo">1</p>
                            </div>                
                        </div>
                        </div>                       
            </div>
            <div class="col-xs-12 col-md-6 col-sm-12 col-lg-6">
             <div id="games">
             <div class="row gameRow">
        <div class="gamenum-box col-md-2">
            <p class="gameNo">GAME</p>
            <p class="gameNo">1</p>
        </div>
        <div class="imgBox col-md-4">
            <img src="../assets/images/games/team1.png" class="imgteam1">
            <span class="vs-span">VS</span>
            <img src="../assets/images/games/team2.png" class="imgteam2">
        </div>
        <div class="datetimeBox col-md-4">
            <table>
                <tr>
                    <th><b>Date</b></th>
                    <th><b>Time</b></th>
                </tr>
                <tr>
                    <td><b>12 Jan 2019</b></td>
                    <td><b>12:00PM</b></td>
                </tr>
            </table>                                 
        </div> 
        <div class="courtBox col-md-2">
            <p class="gameNo">COURT</p>
            <p class="gameNo">1</p>
        </div>                
    </div>
    </div>                       
</div>
            <!-- End Games Section -->

        </div>
    </div>
</div>

截图

笔记本电脑全宽

1140x570 像素视图

iphone6,7,8 查看

ipadpro 视图

使用的实际图像

1队

2队

标签： htmlcssbootstrap-4responsive-design

解决方案

我之前的回答是关于如何处理网格的假设性整体概念化。

至于我的解决方案，我不会用表格来设计它，因为表格会在设计增长方面产生设计限制。但是，如果必须这样做，则可以使用表格。

同样，如果我不得不再次重新编码，我会走另一条路。

我添加了一些@media 解决方案。

另外一定要记住，当您使用响应式设计并且想要在网格内对齐图像时，请确保它们都具有相同的大小。即使是 1px 的差异也会让您头疼。

在我的示例中，我已将图像大小调整为 200 像素的高度和宽度。即使它在您的屏幕上看起来不错，但当图像变大时也会存在差异，即使现在，如果您这样放置，一个看起来比另一个小。

更重要的是，我将您的图片从 .png 更改为 .jpg。除非您需要在图像中使用透明背景，否则可以使用 .png，否则使用 .jpg，因为它是一个较小的文件并且更适合您的页面加载。此外，如果您要使用缩略图之类的图像，200px 太大，请将它们缩小到 60px 或其他大小，具体取决于您的屏幕尺寸。

.games-table{
    padding: 30px;
}

.gameRow{
    box-shadow: 0px 0px 6px 0px;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
.gameRow:hover{
    box-shadow: 0px 0px 15px 0px;

}
.gameNo{

    margin-bottom: 0px;
}
.gameNo, .imgBox, .courtBox{
    text-align: center;
}

li{
    list-style-type: none;
}
.imgteam1, .imgteam2{
    width: 48px;
    height:auto;
}
.gamenum-box{
    background-color: #000066;
    color: #ffffff;

}
.gamenum-box, .imgBox, .courtBox{
    padding: 20px 20px;
}
.datetimeBox{
    padding: 5px 5px;
}
.vs-span{
    margin: 0px 10px;
}
th,td{
    padding: 0px 10px;
}
th{
    border-bottom: 1px solid #cccccc;
}
.datetimeBox{
    color: #000000;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to top, #cccccc, rgba(0, 0, 0, 0) ) 1 100%;
    background-image: linear-gradient(80deg, #f1f1f1 , white, #f1f1f1);
    transform: skew(-10deg, 0deg);
}
table{
    transform: skew(10deg, 0deg);
    width: 100%;
}

#games{
    z-index:0;
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}
.newDiv{
    width:50%;

}
.gamenum-box, .courtBox {
    width: 20%;
}
.datetimeBox{
    width:30%;
}
.imgBox{
    width:30%;
}
.gameVis{
    display: none;
}

@media (min-width: 766px) {
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

  .container {
    padding-right: 5px;
    padding-left: 5px;
  }

  .imgbox {
    padding-right: 5px;
    padding-left: 5px;
  }

  .imgteam1, .imgteam2{
        width: 30.3333% !important;
    }

    .imgbox {
        width: 100%;
    }

     th,td{
        padding: 0px 1px;
    }
    p, ul, blockquote, pre, td, th, label {
    margin: 0;
    font-size: 80%;
    line-height: 1.5em;
    }
}

@media (min-width: 601px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }

  .imgbox {
    padding-right: 5px;
    padding-left: 5px;
  }

  .imgteam1, .imgteam2{
        width: 33.3333%;
    }

    .imgbox {
        width: 100%;
    }

     th,td{
        padding: 0px 1px;
    }
    p, ul, blockquote, pre, td, th, label { /* This part I extended to other style designs as well */
    margin: 0;
    font-size: 80%;
    line-height: 1.5em;
    }
}


@media only screen and (max-width:600px){
    
    .games-table{
        padding:10px;
    }
    .newDiv{
        width:100%;

    }

    .imgteam1, .imgteam2{
        width: 27px;
    }
    .gamenum-box, .imgBox, .courtBox{
        padding: 16px 1px;
    }
    th,td{
        padding: 0px 1px;
    }
    p, ul, blockquote, pre, td, th, label {  /* This part I extended to other style designs as well */
    margin: 0;
    font-size: 80%;
    line-height: 1.5em;
    }
}
@media only screen and (max-width:480px){
 
    .games-table{
        padding: 5px;
    }
    /* .gameNoVis{
        display: none;
    }
    .gameVis{
        display: block;
    } */
    .gamenum-box{
        width: 13%;
    }
    .imgBox{
        width: 32%;
    }
    .datetimeBox{
        width: 40%;
    }
    .courtBox {
        width: 15%;
    }
    p, ul, blockquote, pre, td, th, label {  /* This part I extended to other style designs as well */
    margin: 0;
    font-size: 80%;
    line-height: 1.5em;
    margin-bottom: 1.5em;
    }
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Stylesheets -->    
    <link href="bootstrap.css" rel="stylesheet">    
    <link rel="stylesheet" href="game_team.css" />
</head>


<div class="game-table">
    <div class="container-fluid">
        <div class="row">  
            <div class="col-12">
                <div class="head mb-4">
                    <h2>Matches</h2>
                </div>
            </div>

        </div>
        <div class="row">  
            <!-- Start Games Section 1 -->
        <div class="col-lg-6 col-md-6 col-sm-12  col-xs-12">
             <div id="games">
             <div class="row gameRow">
        <div class="gamenum-box col-md-2">
            <p class="gameNo">GAME</p>
            <p class="gameNo">1</p>
        </div>
        <div class="imgBox col-md-4">
            <img src="https://i.stack.imgur.com/XjbQJ.png" class="imgteam1">
            <span class="vs-span">VS</span>
            <img src="https://i.stack.imgur.com/mJdIz.png" class="imgteam2">
        </div>
        <div class="datetimeBox col-md-4">
            <table>
                <tr>
                    <th><b>Date</b></th>
                    <th><b>Time</b></th>
                </tr>
                <tr>
                    <td><b>12 Jan 2019</b></td>
                    <td><b>12:00PM</b></td>
                </tr>
            </table>                                 
        </div> 
        <div class="courtBox col-md-2">
            <p class="gameNo">COURT</p>
            <p class="gameNo">1</p>
        </div>                
    </div>
    </div>                       
</div>
            <!-- End Games Section 1 -->

            <!-- Start Games Section 2 -->
            <div class="col-lg-6 col-md-6 col-sm-12  col-xs-12">
             <div id="games">
             <div class="row gameRow">
        <div class="gamenum-box col-md-2">
            <p class="gameNo">GAME</p>
            <p class="gameNo">2</p>
        </div>
        <div class="imgBox col-md-4">
            <img src="https://i.stack.imgur.com/XjbQJ.png" class="imgteam1">
            <span class="vs-span">VS</span>
            <img src="https://i.stack.imgur.com/mJdIz.png" class="imgteam2">
        </div>
        <div class="datetimeBox col-md-4">
            <table>
                <tr>
                    <th><b>Date</b></th>
                    <th><b>Time</b></th>
                </tr>
                <tr>
                    <td><b>12 Jan 2019</b></td>
                    <td><b>12:00PM</b></td>
                </tr>
            </table>                                 
        </div> 
        <div class="courtBox col-md-2">
            <p class="gamebox">COURT</p>
            <p class="gameNo">2</p>
        </div>                
    </div>
    </div>                       
</div>
            <!-- End Games Section 2 -->

        </div>
    </div>
</div>

推荐阅读