响应式内联块到第 2 个 div 扩展到容器之外

Question

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

页面上没有其他对象会影响这一点，我已经检查了原始 css 和响应式 css，没有其他对 DI-Right 或DI-左.

媒体查询前 媒体查询后
++++++++++++ ++++++++++++ ++++++++++++
* DI-左 + + DI-右 + + DI-左 +
++++++++++++ ++++++++++++ ++++++++++++
++++++++++++++++++
+ DI-右 +
++++++++++++++++++
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;}
}

响应式内联块到第 2 个 div 扩展到容器之外

Responsive Inline-Block to Block 2nd div extends beyond container

html

css

responsive-design