Блог

Главная - Вопросы по программированию - 3 раздела: один по центру, а два других по одному с каждой стороны

3 раздела: один по центру, а два других по одному с каждой стороны

#css #layout #responsive-design

#css #макет #адаптивный дизайн

Вопрос:

У меня есть эта разметка:

 <body>
 <div class="prevBtn"> <a> < </a> </div>
<div id="player"> some code </div>
<div class="nextBtn"> <a> > </a> </div>
</body>

Я пытаюсь получить этот макет:

введите описание изображения здесь Примечание: Предыдущие и следующая кнопки расположены рядом с #player

И я пытаюсь так:

             .nextBtn{
                 float:left;
                 width:15%;
                 margin-top:180px;
            }
            .nextBtn a{
                float:right;
            }
            .player{
               float:left;
             width:70%;
                 margin-top:100px;
            }
            .prevBtn{
                float:right;
                 width:15%;
                 margin-top:180px;

            }
            .rightBtn a{
                float:left;

            }

проблема в том, что он не остается таким, как макет, если разрешение слишком большое или слишком маленькое,

Как я могу добиться этого для любого разрешения?

Ответ №1:

окружите его div размером 770px ширина левой и правой кнопок (измените их ширину с процента на фиксированную ширину).

Это гарантирует, что все они будут вместе.

Также используйте overflow: hidden или div с clear:both в конце, это позволит убедиться, что все на месте.

Комментарии:

1. эээ … я не уверен, вижу ли я это, я добавил <div class=»nContainer»> шириной 850 пикселей, и теперь правый <a> разваливается..

2. @ToniMichelCaubet убедитесь, что окружающий div достаточно широк, если он равен 850 пикселей, это означает, что левый и правый divs равны 80px, убедитесь, что это так, и попробуйте добавить еще несколько пикселей к окружению (возможно, сделать его 860px).

3. Спасибо! с разрешением 880 пикселей у меня есть макет, но проблема в том, что он не центрирован. И поскольку он имеет фиксированную ширину, я не могу центрировать его с помощью%’s