Отзывчивый Inline-Block для Block 2-й div выходит за пределы контейнера - PullRequest
Новая
       3

Отзывчивый Inline-Block для Block 2-й div выходит за пределы контейнера

0 голосов
/ 27 февраля 2020

Наличие того, что кажется странной проблемой, и решение этой проблемы, чтобы увидеть, видит ли кто-то что-то, чего я не вижу. На этой странице есть два оставленных слева поля, за которыми следует исправление. Вопрос касается только столбцов в левом поле. В левом поле у ​​меня есть строки div с двумя столбцами div inline-block. Когда я изменяю их с помощью медиазапроса, второй столбец (DI-Right) выходит за пределы контейнера (DI_LeftCol). Это соответствует вниз по столбцу. Другими словами, DI-Left остается в контейнере, DI-Right не проходит через ряд последовательных строк.

На странице нет других объектов, которые могли бы повлиять на это, и я проверил оба исходный css и отзывчивый css, и нет никаких других ссылок на DI-Right или DI-Left.

До медиазапроса После медиазапроса
++++++++++++ ++++++++++++ ++++++++++++
* DI-Left + + DI- Справа + + DI-Left +
++++++++++++ ++++++++++++ ++++++++++++
+ +++++++++++++++++
+ 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 Query 

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

1 Ответ

1 голос
/ 27 февраля 2020

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