0

サイズを変更せずにページをこのように見せたい（免責事項：自分のページ）が、サイズを変更（またはモバイル）すると、「はじめに」が「インデックス」に分類され、「履歴」のようになります。例えば。

可能であれば、コード内にインデックスdivと最初のボックスがあります（この場合は「はじめに」ですが、欠落している場合は「必要な知識」は現在のはじめにと同じように動作します） 。これにより、PHPコードの背後がはるかに単純になります。また、「はじめに」は、上記のリンクに示されているように、ページ全体を自然に流れ、インデックスを折り返し、その下のページを100％埋める必要があります。

これは私がこれまでに得たものですが、私はそれを正しく動作させることができません。サイズを変更しないと見栄えが良くなりますが、「はじめに」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>
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}
}

ページ幅が600px未満の場合は、メディアクエリの中括弧内のすべてが使用されます。

メディアクエリはここにとどまり、悲しい古いブラウザを使用している人にとっては「優雅に」低下します。

私がここで設定した例を見てください：http： //jsfiddle.net/AqbSY/4/

ブラウザのサイズを変更して、これがどのように機能するかを確認してください。

#box要素にfloatやsizeを設定する必要はありません。

于 2013-01-28T18:24:33.793 に答える