Question

我希望我的页面看起来like this而不调整大小（免责声明：自己的页面），但是，我希望在调整大小（或移动）时，“简介”将落在“索引”下并且看起来只是例如，“历史”看起来像。

如果可能的话，我甚至会喜欢这样，在代码中，有索引div然后是第一个框（在本例中为“Introduction”，但如果缺少，“Required knowledge”的行为方式与现在介绍）。这将使PHP代码更加简单。此外，“简介”应自然流过页面，如上面的链接所示，包裹索引并填充其下100％的页面。

This is what I've got so far，但我无法让它表现得正确。如果没有调整大小，它看起来不错，但是“简介”h2将首先由于它的％和固定填充（总共水平20px），而文本保持原位，位于文本的中间。我想，如果h2掉落，文本将以纯HTML和CSS结尾。

这甚至可能吗？我正在努力，但我不能让它按照我的意愿行事。这是'test / ck'的相关代码（当它工作时我会把它放在一个单独的样式表中）：

<div style="width: 25%; float: left; min-width: 150px; margin-right: 2%;">
  <h2>
      Index
  </h2>
  <div id="index" style="width: 100%">
    <ul>
      <li><a href="#announcements">Announcements</a></li>
      <li><a href="#description">Description</a></li>
      <li><a href="#first">Subjects</a></li>
      <li><a href="#competency">Competency</a></li>
      <li><a href="#schedule">Schedule</a></li>
      <li><a href="#evaluation">Evaluation</a></li>
    </ul>
  </div>
</div>

<div id='box' style="">
  <h2 style="width: 70%; float: right;">
    <?php echo $_('Introduction'); ?>
  </h2>
  <p>
  Lorem ipsum dolor sit amet, consecte22tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<span style="clear: left; display: block;"></span>

<br><br>

  <h2 id="announcements">Announcements</h2>
  <p>
  Lorem ipsum dolor sit amet, consecte22tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <br><br>

Answer 1

我认为您正在寻找CSS媒体查询

http://www.w3.org/TR/css3-mediaqueries/ http://css-tricks.com/css-media-queries/

您可以在css中实现页面宽度“中断”，如下所示：

@media all and (max-width: 600px) {
  #index { width: 100% }
  body { background: red}
}

如果页面宽度小于600px，将使用媒体查询的大括号中的任何内容。

媒体查询将继续存在，并且对于那些使用悲伤旧浏览器的人来说，它们会“优雅地”降级。

看看我在这里设置的示例： http://jsfiddle.net/AqbSY/4/

调整浏览器的大小，看看它是如何工作的。

您无需在#box元素上设置浮动或大小。

如何在不实际包装div的情况下将div包装在另一个div中？

1 个答案: