0

我希望我的页面在不调整大小的情况下看起来像这样（免责声明：自己的页面），但是，我希望在调整大小（或移动）时，“简介”会落在“索引”下，看起来就像“历史”的样子，例如。

如果可能的话，我什至希望，在代码中，有索引 div，然后是第一个框（在本例中为“介绍”，但在缺少的情况下，“所需知识”的行为方式与现在的介绍相同） . 这将使后面的 PHP 代码更简单。此外，“介绍”应该自然地流过页面，如上面的链接所示，环绕索引并填充其下方页面的 100%。

这是我到目前为止所拥有的，但我无法让它表现得正确。如果不调整大小，它看起来不错，但是由于它的 % 和固定填充（总共水平 20 像素），“介绍”h2 会首先下降，而文本保持在原位，进入文本中间。我希望，如果 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>
4

1 回答 1

2

我认为您正在寻找 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}
}

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

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

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

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

您不需要在 #box 元素上设置浮点数或大小。

于 2013-01-28T18:24:33.793 回答