0

私は維持するページを持っていますが、それは他の誰かによって非常に貧弱に開発されました。私にとってのすべての変化は今や本当の試練です。これで、ページは基本的に次のようになります。

 ____________________
|                    |
|        body        |
|                    |
|                    |
|    width: 1000px   |
|                    |
|                    |
|____________________|

リンク付きのdivをいくつか追加したいので、ページは次のようになります。

 _______ ____________________ _______
| left  |                    | right |
| 400px |        body        | 400px |
| width |                    | width |
|_______|                    |_______|
        |    width: 1000px   |
        |                    |
        |                    |
        |____________________|

ボディは中央に配置する必要があり、ウィンドウサイズによって異なりますが、左右のdivを完全に表示するか、一部だけを表示する必要があります。Webで同様の問題を検索し、さまざまな解決策を試しましたが、ページがクラッシュし、ページ要素が混乱していました。

これらのdivを簡単に追加するにはどうすればよいですか？

4

4 に答える 4

4

このフィドルを確認してください：http：//jsfiddle.net/GSygt/

上記のフィドルで、CSSの中央のコンテンツの幅を1000pxに変更します。結果がjsfiddle出力ペイン内に表示されるように200pxを使用しました。

HTML

<html>
    <body>  
        <div class="center">

            This is my content!

            <div class="side left">LEFT</div>       
            <div class="side right">RIGHT</div>
        </div>
    </body>    
</html>

CSS

body {
    overflow-x: hidden;    
}
.center {
    position: relative;
    width: 200px;   /* change this to 1000px */
    background-color: #dfd;    
    margin: auto;
    text-align: center;
    min-height: 600px;
}
.side {
    position: absolute;
    width: 400px;   
    top: 0;
    background-color: #ddd;
    text-align: center;
    min-height: 200px;
}
.left {
    left: -400px;
}
.right {
    right: -400px;
}
于 2012-07-02T12:41:05.543 に答える
2

したがって、デザインでは何も変更できないと想定しています。実行できるのは、本体にdivを追加することだけです。その場合は、次のようにします。http: //jsfiddle.net/joplomacedo/4p6nw/

1）最初に新しいdivの幅を設定します。
2）次に、お互いを自分の側に浮かせます。
3）フロートする側に、幅と同じになるように負のマージンを追加します。
4）本体に、左にフロートされたdivの幅に等しいパディング-左を追加し、次に右にフロートされたdivの幅に等しいパディング-右を追加します。

このHTMLの場合...

<body>
   <div class="left-div"></div>
   <div class="right-div"></div>
</body>

...CSS

body {
  width: 1000px;
  margin: 0 auto;
  padding: 0 400px;
}

.left-div {
  float: left;
  width: 400px;
  margin-left: -400px;
}

.right-div {
  float: right;
  width: 400px;
  margin-right: -400px;
}
于 2012-07-02T12:45:17.263 に答える
0

おそらく絶対測位を使用します。（静的な幅として1800pxを使用しないこともお勧めしますが、2つのサイドバーは広告用だと思います。以前、マーケティングモンキーと同じ議論をしたことがあるので、理解しています）

.center {位置：絶対; 上：0; 左：50％; マージン左：-500px; 表示ブロック;}

次に、左右を中央に配置しますが、絶対位置で引き出します。

たとえば

.right {位置：絶対; 上：0; 右：-400px; 幅：400px;}

左はその逆です。

これがお役に立てば幸いです。水平スクロールバーがありますが、同じことがフロート要素にも当てはまります。

于 2012-07-02T13:51:51.370 に答える
-3

サイトの幅を1800ピクセルにすることはお勧めしません。

しかし、あなたは以下の構造に従うことができます：3tdのようなテーブル

<table>
<tr>
<td id="first" valign=top> content </td>
<td id="middle" valign=top> content </td>
<td id="last" valign=top> content </td>
</tr>
</table>

スクロールを無効にするには、これをスタイルシートに追加します。

body{overflow-x:hidden;}
于 2012-07-02T12:27:24.570 に答える