0

現在、クライアントhttp://minta.jvsoftware.com/の次のサイトで作業していますが、メイン コンテナーの上下の境界線をこのhttp://awesomescreenshot.com/divのようにしようとしています。 0f8jdwn71基本的に、境界線を画面の最後まで左に広げます (赤い色は気にしないでください。これは、私が現在持っている境界線と同じ色であるはずです)。

私は解決策を考え出そうとしてきましたが、これまでのところ失敗しました。css だけで実装するのが難しすぎる場合は、JS/jQuery ソリューションを試してみます。

誰でも私を助けることができますか？前もって感謝します！

4

3 に答える 3

1

これは、負のマージンを持つ純粋な CSS によって実現できます。

まず、次のように .container の CSS を更新する必要があります。

.container {
  clear: both;
  font-family: "Times New Roman",Times,serif;
  margin: 124px auto 36px;
  padding: 0;
  width: 940px;
}

メイン div のコンテンツを別の div にラップし、次のような CSS を適用します。

<div id="main" class="container clearfix" role="main">
    <div style="border: 1px solid red; margin-left: -2000px; padding: 8px 8px 8px 2000px;">
        <div class="content"> ... </div>
        <div class="featured-image"> ... </div>
        <div style="clear:both;"></div>
    </div>
</div>

これを理解するのに役立つスクリーンショットを次に示します。 ここに画像の説明を入力

于 2011-08-29T09:29:55.567 に答える
0

必要なレイアウトを実現するには、コンテナー div の左側に a を配置し、それらを左にフロートさせ、この div の上部と下部に赤色の境界線を付ける必要があると思います

于 2011-08-29T09:03:55.390 に答える
0

なぜ「position:absolute」を使わないのですか? この場合、それは私が推測する完璧な解決策です。

<style>
.topborder,
.bottomborder {
  position:absolute;
  left:-100px;
  width:150px;
  height:3px;
  background:#ff0000;
  z-index:999;
}

.topborder {
  top:-3px;
}

.bottomborder {
  bottom:-3px;
}

#main {
  position:relative;
}
</style>

<div id="main" class="container clearfix" role="main">
  <div class="topborder"></div><div class="bottomborder"></div>

  your content

</div>
于 2011-08-29T10:18:36.313 に答える