响应内联块到块 2nd div 超出容器

Question

遇到一个奇怪的问题并将其发布出来，看看是否有人看到了我没有看到的东西。 此页面上有两个左浮动框，后跟一个 clearfix。该问题仅涉及左侧框中的列。 在左边的框中，我有 div 行和两个 inline-block div 列。 当我使用媒体查询更改这些时，第二列（DI-Right）超出了容器（DI_LeftCol）。 这在专栏下方是一致的。换句话说，DI-Left 停留在容器内，DI-Right 不会，通过许多连续的行。

页面上没有其他对象会影响这一点，并且我已经检查了原始 css 和响应 css，并且没有其他对 DI-Right 或 DI-Left 的引用。

媒体查询前                            媒体查询后
++++++++++++    ++++++++++++    ++++++++++++
* DI-左        +     + DI-右       +    + DI-左           +
++++++++++++    ++++++++++++    ++++++++++++
++++++++++++++++++++
+ DI-Right                    +
++++++++++++++++++++
HTML（包装在 PHP 回显中）

echo('
<div id="DI_LeftCol">
    <div class="DivHeadRow">Information</div>
    <div id="DI_LeftColInner">
        <div class="DI-Row">
            <div class="DI-Left">ID #:</div>
            <div class="DI-Right">'.$ID.'</div>
        </div>
        //etc (Several rows)
    </div>
</div>');

CSS

#DI_LeftCol {float:left; width:45%; max-width:400px; margin-bottom:15px; margin-top:30px;}
.DivHeadRow {float:left; width:100%; border:1px solid #949494;}
#DI_LeftColInner {border:1px solid #808080; width:100%; background-color:#F5F5F5;}
#DI_RightCol {width:45%; max-width:500px; float:right; margin:28px 15px 8px 15px; text-align:center;}
.DI-Row {display:block; width:100%;}
.DI-Left {display:inline-block; padding-right:3px; text-align:right; width:120px; min-width:120px; font-weight:600;}
.DI-Right {display:inline-block; padding-left:3px; text-align:left; width:210px; min-width:210px;}

媒体查询

@media only screen and (max-width: 900px)
{
    #DI_LeftCol .DivHeadRow {float:none; width:100%; border:1px solid #949494;}
    .DI-Row .DI-Left {display:block; padding:0; text-align:center; width:100%; font-weight:800; background-color:#CFC9D3;}
    .DI-Row .DI-Right {display:block; padding:0; text-align:center; width:100%;}
    .DI-Row .DI-TermLink {display:inline-block; padding-left:3px; text-align:left; width:50px; min-width:50px;}
}    

Answer 1

.DI-Right 有一个min-width:210px，它不会在媒体查询中被覆盖，也就是说，它不会缩小到该值以下。您必须用另一个值覆盖媒体查询中的值（0，如果您根本不想要任何min-width）。

在您的媒体查询中，类似

@media only screen and (max-width: 900px)
{
    #DI_LeftCol .DivHeadRow {float:none; width:100%; border:1px solid #949494;}
    .DI-Row .DI-Left {display:block; padding:0; text-align:center; width:100%; font-weight:800; background-color:#CFC9D3;}
    .DI-Row .DI-Right {display:block; padding:0; text-align:center; width:100%;min-width:0;}
    .DI-Row .DI-TermLink {display:inline-block; padding-left:3px; text-align:left; width:50px; min-width:50px;}
}