как установить fieldset в div?

Question

У меня есть следующий HTML-код:

<div id="panel" style="width:100%; height: auto;position:relative; overflow: auto;"> 
    <fieldset style="position:relative; width: 48%;float:left;"> 
    ... 
    </fieldset id="A" style="position:relative; width: 48%;float:left;"> 

    <fieldset id="B" style="position:relative; width: 48%;float:left;"> 
    ... 
    </fieldset> 
</div> 

Когда я исполняю страницу как правильно соответствовать одной левой и другое право. Моя проблема в том, когда я уменьшаю (когда изменяю размер) проводника. Конечно, B установлен в поле A, но ширина установлена ​​равной 47%. Я бы хотел поместить его в этой ситуации на 100%, и когда я разберу проводник, чтобы он снова поместился на 47%. Надеюсь, я поняла, если не спрошу.

Может ли какой-нибудь орган дать мне некоторую идею? возможно, используя jquery, css, я не знаю

Answer 1

Итак, вы хотите создать отзывчивый дизайн, где на больших экранах эти два элемента расположены сбоку, а на меньших экранах они расположены поверх каждого другой, но используя все доступное пространство? Подумайте, используя что-то вроде Bootstrap с чувствительной сеткой для достижения этого.

Answer 2

Что вам нужно, это что-то вроде медиа-запросов для отзывчивого дизайна.

Take a look at this example here.

Соответствующий код заключается в следующем:

@media only screen and (max-width: 980px) { 
    fieldset{ 
     float: none; 
     width: 97%; 
    } 
} 

Этот код выполняется, когда ваш экран соответствует этому размеру.

Btw, я отделил ваши свойства css к файлу css, так как это не очень хорошая практика, чтобы они были встроенными.

Запросы СМИ не работают в ie8, после выполнения этой работы.

Если вы хотите быть совместимым с ie8, вы должны сделать это с помощью javascript.

Пожалуйста, обратите внимание на этот Anser: https://stackoverflow.com/a/5770956/463065

Вы также можете сделать это с modernizr.

Он полностью модульный, поэтому вы можете скачать только часть, которая вам нужна для медиа-запросов, пойти here и выбрать только медиа-запросы, скачать js-файл и добавить его в ваш источник.

Вы можете увидеть пример, который я сделал для вас here, первая часть javascript - это только модернизатор, который я скачал, в вашем случае вы должны включить файл, который вы загрузили, идите в нижнюю часть части js, чтобы увидеть, что Я действительно это сделал.