Проблема с запросом @media в CSS с адаптивным дизайном

Question

Проблема с запросом @media в CSS с адаптивным дизайном

0

В мой ниже, я добавляю две divs внутри главного сНу называется block и устраивая один в левом, а другой в right.I кладу границу для основного сНу block

Но проблема, с которой я столкнулся, заключается в том, что когда размер экрана ниже 300 пикселей, два дочерних div будут организовываться один за другим, но граница не будет правильно выравниваться. Граница не полностью покрывает двух дочерних divs. Как решить проблему с этой границей.

Другая проблема заключается в том, что этот код не работает в IE (проверка с помощью IE11). какой параметр мне нужно добавить \modify, чтобы работать с IE

Настройка скрипта

HTML:

<!DOCTYPE html>
<html>
<body>
    <div class="block">
        <div class="input-quest">Your devices are sequential ?</div>
        <div class="input-resp">
            <input type="radio" name="button" value="Yes" /><label>Yes</label>
            <input type="radio" name="button" value="No"  /><label>No</label>
        </div>
    </div>

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</body>
</html>

CSS:

.block {
width: inherit;
width: 96%; 
max-width: 700px;
margin: auto;
border-style:solid;
border-width:2px;
border-color:#ddd;
height:20%;
padding:1%;

}
.input-quest {
width: 60%;
float:left;
}
.input-resp {
width: 40%;
text-align: center;
float:right;
}

@media (max-width:300px) {

.input-resp {
background-color:red;
width: 100%;
float:left;
text-align:left;
}

.input-quest {
background-color:green;
width: 100%;
float:left;
text-align:left;
}

}

anoopcr 06 дек. 2013, в 23:56

Источник

Теги:

html

css

html5

responsive-design

1 ответ

Ещё вопросы

disinfor · Accepted Answer · 2013-12-06T19-59-00.000Z

Вы ваша height устанавливается в 20px на вашем .block дел. Поэтому вам нужно будет либо удалить это в вызове @media либо установить новую height. Вы также должны очистить некоторые ваши floats в своем основном CSS и удалить их в запросе @media.

См. Обновленный файл jsfiddle: http://jsfiddle.net/XYMtx/1/