时间戳

首页 > 解决方案 > 响应内联块到块 2nd div 超出容器

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

问题描述

有什么似乎是一个奇怪的问题，然后把它拿出来看看是否有人看到了我没有看到的东西。此页面上有两个左浮动框，后跟一个 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;}
}

标签： htmlcssresponsive-design

解决方案

.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;}
}

推荐阅读