Содержимое веб-сайта перемещается при изменении размера окна

Question

Я создал веб-сайт, и у меня есть проблема, так как каждый раз, когда изменяется размер окна, содержимое сайта перемещается и не остается упорядоченным.

Что можно сделать, чтобы исправить эту проблему? Спасибо большое!

Вот пример кода из моего webite:

<section class="nav-panel nav-color" id="nav-panel-2"> 
    <div class="img"> 
     <a target="_blank" href="images/Starters/starters1.jpg"> 
     <img src="images/Starters/starters1.jpg" alt="Restaurant" width="600" height='auto'> 
     </a> 
     <div class="desc">Fried Ravioli</div> 
    </div> 

    <div class="img"> 
     <a target="_blank" href="images/Starters/Starters2.jpg"> 
     <img src="images/Starters/starters2.jpg" alt="Restaurant" width="600" height='auto'> 
     </a> 
     <div class="desc">Cheese Bread</div> 
    </div> 

    <div class="img"> 
     <a target="_blank" href="images/Starters/breadsticks.jpg"> 
     <img src="images/Starters/breadsticks.jpg" alt="Restaurant" width="600" height='auto'> 
     </a> 
     <div class="desc">Garlic Bread</div> 
    </div> 

    <div class="img"> 
     <a target="_blank" href="images/Starters/mozzarellaSticks.jpg"> 
     <img src="images/Starters/mozzarellaSticks.jpg" alt="Restaurant" width="600" height='auto'> 
     </a> 
     <div class="desc">Mozzarella Sticks</div> 
    </div> 

    <div class="img"> 
     <a target="_blank" href="images/Starters/wings.jpg"> 
     <img src="images/Starters/wings.jpg" alt="Restaurant" width="600" height='auto'> 
     </a> 
     <div class="desc">Chicken Wings</div> 
    </div> 
    </section> 

Answer 1

Вы должны работать на вашем CSS. Измените поплавок, высоту, ширину, максимальную ширину и т. Д., Чтобы создать отзывчивый веб-сайт. Вам нужно использовать JavaScript и плагины вроде JQuery, чтобы еще больше повысить привлекательность вашего сайта.

В целом, этот вопрос не даст вам никаких ответов или ответов. Присоединитесь к некоторому учебнику или чему-то в ответном веб-разработке.

Answer 2

Не используйте атрибуты margin и padding для центровки ваших элементов. Создайте обертку div, а затем установите margin: 0 auto; к нему.

Answer 3

Вы можете указать позицию: абсолютную или фиксированную в стилях. Пример. #div{ position:absolute; }