Question

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

我该怎么做才能解决这个问题？非常感谢！

以下是我的网站上的代码示例：

<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之类的插件来进一步增强您网站的吸引力。

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

Answer 2

不要使用边距和填充属性来使元素居中。创建一个包装div然后设置margin：0 auto;它。

Answer 3

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

调整窗口大小时，网站内容会移动

3 个答案: