Question

我遇到了一个奇怪的问题，就是在@media screen and (min-width: 640px) and (max-width:840px)的媒体查询范围内抛弃了整个页面。出于某种原因，我看到我将margin-left应用于我拥有的第一个盒子容器，但在我的代码中没有设置margin-left。我试图在它上面的兄弟之后立即应用div blue-box-container的开头来消除空白区域，但这没有帮助。

有没有人知道为什么我会在第一个蓝框左边的白色空间？

如果有人需要看到这个，我可以在我的评论中添加网站。如果想要的话请评论。

.blue-box-container {
    width: 100%;
    height: 100%;
}
.dark-blue-box, .light-blue-box {
    height: 33%;
    width: 50%;
    display: inline-block;
}
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover {
    display: block;
    font-size: 1.1em;
    padding-top: 10px;
}
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover {
    display: block;
    font-size: .9em;
    padding-top: 5px;
    clear: both;
}
.dark-blue-box:hover .insideBoxWrap, .light-blue-box:hover .insideBoxWrap {
    padding: 3% 6%;
}
.dark-blue-box:hover .box-title, .light-blue-box:hover .box-title {
    padding-top: 7%;
}
.dark-blue-box:nth-child(3){
    background-color: #8fc9d6;
 }
.light-blue-box:nth-child(4){
    background-color: #45a5ba;
}
.dark-blue-box:nth-child(3):hover, .light-blue-box:nth-child(4):hover{
    background-color: purple;
}
.dark-blue-box:nth-child(5){
    background-color: #45a5ba;
 }
.light-blue-box:nth-child(6){
    background-color: #8fc9d6;
}
.insideBoxWrap {
    padding: 10% 30px;
}
.box-title {
    font-size: 2em;
}
.box-description {
    padding-top: 5px;
    font-size: 1.1em;
}
/*------Home Icons ------*/
.home-icon img {
    height: 52px;
    width: 52px;
    padding-right: 6%;
    padding-bottom: 10px;
    float: left;
}
.dark-blue-box:hover .home-icon img, .light-blue-box:hover .home-icon img {
    height: 76px;
    width: 76px;
}

HTML - 我没有将所有块附加到所有块中，而是仅应用了两个块来演示一般序列。

<div class="blue-box-container">
  <div class="dark-blue-box">
    <div class="insideBoxWrap">
        <div class="home-icon"><img src="/icons/screen6.png" alt=""></div>
        <div class="box-title">Brand Strategy</div>
        <div class="box-description">Digital Roadmap</div>
        <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
        fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div><div class="light-blue-box">
    <div class="insideBoxWrap">
        <div class="home-icon"><img src="/icons/web2.png" alt=""></div>
        <div class="box-title">Development</div>
        <div class="box-description">That Outperforms</div>
        <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
        fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div>
 </div>

Answer 1

您可以在该框中添加负值以消除空白区域。

.insideBoxWrap {
    position: relative;
    left: -10px;
}

Answer 2

我认为

.insideBoxWrap {
    padding: 10% 30px;
}

导致空白问题。你左右两边都有30px的填充，所以.insideBoxWrap内的所有元素都向右移动了30px。由于insideBoxWrap上没有背景颜色，因此会出现空白区域。

Answer 3

可能有多种解决方案，我建议在框中添加> pander(head(mtcars), split.table = 80, style = 'rmarkdown') |   | mpg | cyl | disp | hp | drat | |:-----------------------:|:-----:|:-----:|:------:|:----:|:------:| | **Mazda RX4** | 21 | 6 | 160 | 110 | 3.9 | | **Mazda RX4 Wag** | 21 | 6 | 160 | 110 | 3.9 | | **Datsun 710** | 22.8 | 4 | 108 | 93 | 3.85 | | **Hornet 4 Drive** | 21.4 | 6 | 258 | 110 | 3.08 | | **Hornet Sportabout** | 18.7 | 8 | 360 | 175 | 3.15 | | **Valiant** | 18.1 | 6 | 225 | 105 | 2.76 | Table: Table continues below |   | wt | qsec | vs | am | gear | carb | |:-----------------------:|:-----:|:------:|:----:|:----:|:------:|:------:| | **Mazda RX4** | 2.62 | 16.46 | 0 | 1 | 4 | 4 | | **Mazda RX4 Wag** | 2.875 | 17.02 | 0 | 1 | 4 | 4 | | **Datsun 710** | 2.32 | 18.61 | 1 | 1 | 4 | 1 | | **Hornet 4 Drive** | 3.215 | 19.44 | 1 | 0 | 3 | 1 | | **Hornet Sportabout** | 3.44 | 17.02 | 0 | 0 | 3 | 2 | | **Valiant** | 3.46 | 20.22 | 1 | 0 | 3 | 1 |：

> panderOptions('table.split.table', 80)
> panderOptions('table.style', 'grid')
> panderOptions('table.split.cells', 10)
> panderOptions('table.alignment.default', 'left')
> panderOptions('table.alignment.rownames', 'right')
> panderOptions('decimal.mark', ',')
> pander(head(mtcars))

+----------------+-------+-------+--------+------+--------+-------+
|         &nbsp; | mpg   | cyl   | disp   | hp   | drat   | wt    |
+================+=======+=======+========+======+========+=======+
|        **Mazda | 21    | 6     | 160    | 110  | 3,9    | 2,62  |
|          RX4** |       |       |        |      |        |       |
+----------------+-------+-------+--------+------+--------+-------+
|        **Mazda | 21    | 6     | 160    | 110  | 3,9    | 2,875 |
|      RX4 Wag** |       |       |        |      |        |       |
+----------------+-------+-------+--------+------+--------+-------+
|       **Datsun | 22,8  | 4     | 108    | 93   | 3,85   | 2,32  |
|          710** |       |       |        |      |        |       |
+----------------+-------+-------+--------+------+--------+-------+
|     **Hornet 4 | 21,4  | 6     | 258    | 110  | 3,08   | 3,215 |
|        Drive** |       |       |        |      |        |       |
+----------------+-------+-------+--------+------+--------+-------+
|       **Hornet | 18,7  | 8     | 360    | 175  | 3,15   | 3,44  |
|   Sportabout** |       |       |        |      |        |       |
+----------------+-------+-------+--------+------+--------+-------+
|    **Valiant** | 18,1  | 6     | 225    | 105  | 2,76   | 3,46  |
+----------------+-------+-------+--------+------+--------+-------+

Table: Table continues below

+----------------+--------+------+------+--------+--------+
|         &nbsp; | qsec   | vs   | am   | gear   | carb   |
+================+========+======+======+========+========+
|        **Mazda | 16,46  | 0    | 1    | 4      | 4      |
|          RX4** |        |      |      |        |        |
+----------------+--------+------+------+--------+--------+
|        **Mazda | 17,02  | 0    | 1    | 4      | 4      |
|      RX4 Wag** |        |      |      |        |        |
+----------------+--------+------+------+--------+--------+
|       **Datsun | 18,61  | 1    | 1    | 4      | 1      |
|          710** |        |      |      |        |        |
+----------------+--------+------+------+--------+--------+
|     **Hornet 4 | 19,44  | 1    | 0    | 3      | 1      |
|        Drive** |        |      |      |        |        |
+----------------+--------+------+------+--------+--------+
|       **Hornet | 17,02  | 0    | 0    | 3      | 2      |
|   Sportabout** |        |      |      |        |        |
+----------------+--------+------+------+--------+--------+
|    **Valiant** | 20,22  | 1    | 0    | 3      | 1      |
+----------------+--------+------+------+--------+--------+

它解决了您的问题。

仅在特定媒体查询

3 个答案: