调整窗口大小时网站内容移动答案

【问题标题】：Website content moves when window is resized调整窗口大小时网站内容移动
【发布时间】：2016-06-07 11:57:52
【问题描述】：

我创建了一个网站，但我遇到了一个问题，因为每次调整窗口大小时，网站中的内容都会移动并且不会保持有序。

我能做些什么来解决这个问题？非常感谢！

这是我网站上的代码示例：

<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>

【问题讨论】：

您需要更具体地解释问题并添加一些代码示例。
嘿，尝试阅读响应式网页设计。还将您网站的 div 宽度更改为实际宽度的百分比并正确设置边距。
@TheDrot 我现在添加了一个代码示例 :) 希望对您有所帮助！

标签： html css web resize window

【解决方案1】：

你必须处理你的 CSS。编辑浮动、高度、宽度、最大宽度等以创建响应式网站。您需要使用 JavaScript 和 JQuery 等插件来进一步提升您网站的吸引力。

一般来说，这个问题不会给您任何答复或答案。加入一些关于响应式 Web 开发的教程或其他内容。

【讨论】：

【解决方案2】：

不要使用 margin 和 padding 属性来使元素居中。创建一个包装器 div 然后设置 margin: 0 auto;给它。

【讨论】：

【解决方案3】：

您可以在样式中给出位置：绝对或固定。例子。 #div{ position:absolute; }

【讨论】：