5

添付の写真に見られるように、ページレイアウトを作成しようとしています。問題は、それを適切に機能させることができないことです。私はそれを機能させるために半日を費やしましたが、成功しませんでした. メニューに固定幅の div が必要で、その 2 つの div の隣に、それぞれが残りのページ幅の半分を占める列を作成します。高さはすべてコンテンツに依存する必要があります。

誰でもアイデアはありますか？このような混合パーセンテージ/ピクセル レイアウトに関する多くの情報を見つけることができましたが、それほど難しいとは想像できません。

写真：ここに画像の説明を入力

4

2 に答える 2

2

そんな感じ：

<style type="text/css">
.container
{
  padding-left: 160px;
  position: relative;
}
.leftmenu
{
  width: 160px;
  height: 200px;
  background: red; /* For demo purposes */
  position: absolute;
  top: 0;
  left: 0;
}
.width50
{
  width: 50%;
  float: left;
}
.left-content
{
  height: 300px;
  background: green /* For demo purposes */
}
.right-content
{
  height: 150px;
  background: blue   /* For demo purposes */
}
.clear
{
  clear: both;
}
</style>
<div class="container">
  <div class="leftmenu"></div>
  <div class="content">
    <div class="width50 left-content"></div>
    <div class="width50 right-content"></div>
    <div class="clear"></div>
  </div>
</div>

それは内側のコンテナのみです（ヘッダーまたはフッターなし）

于 2012-05-18T13:29:39.297 に答える
0

JavaScript によるアプローチ。

ここで、まさに必要なレイアウトを作成しました。このリンクを確認してください。

ブラウザのサイズを変更して更新します。あなたはそれが働いているのを見ることができます！

次のスクリプトを使用して画面の解像度を調べ、コンテンツの幅を計算しました。

<script type="text/javascript">
wscreen = window.innerWidth; //Determine screen resolution
content_width = (wscreen - 160); //Adjusting the screen
document.getElementById("container").style.width = content_width + "px"; // Adding the width to CSS
</script>

純粋な CSS アプローチも機能します。

乾杯 ！！！

于 2012-05-18T17:42:00.910 に答える