0

現在ポートフォリオサイトを作成中です。

私が取り組んでいるページはhttp://www.infomaticfilms.com/jack/jrimg/g_and_d.htmにあります。

この問題を解決するまで先に進みたくないので、まだ完成には程遠いです。このページは、さまざまなプロジェクト ページすべての一般的なページになります。つまり、すべてのページの高さが異なります。プロジェクトごとに個別のページを作成するのではなく、その都度コンテンツを削除してページを保存し直すだけで、すべてに使用できる 1 つのページを作成したいと考えています。[私] または [連絡先] リンクをクリックすると、他のページが表示され、境界線が表示されます。Stack Overflow の記事を読んで、ソリューションに非常に近づくことができました。Firefox に問題がありますが、右側の境界線に 1 ピクセルが追加されます。HTMLは次のとおりです。

<div class="contentAndBorders">   
 <div class="borderLeft"></div>   
 <div class="mainContentProjectPage">
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>   
</div>   
<div class="borderRight"></div> 
</div>

mainContentProjectPage のクラスを使用して、コンテンツを div に入れようとしています。mainContentProjectPage の高さで拡張するには、borderLeft と borderRight のクラスを持つ div が必要なので、境界線は現在行っているように連続して表示されます。基本的に3列です。1 列目と 3 列目は左右の白い枠線で、中央の列はコンテンツ用です。CSSは次のとおりです。

.contentAndBorders {
      width: 950px;
      position: relative;
      overflow: hidden;
}
.mainContentProjectPage {
      float: left;
      background-color: #F55816;
      width: 100%;
      padding-left: 24px;
}
.borderLeft {
      float: left;
      background-color: #FFF;
      width: 1.3%;
      background-attachment: scroll;
      background-image: none;
      background-repeat: repeat;
      background-position: 0px 0px;
      position: absolute;
      left: 0px;
      height: 100%;
      margin: 0;
}
.borderRight {
      background-attachment: scroll;
      background-color: #FFF;
      background-image: none;
      background-repeat: repeat;
      background-position: 0px 0px;
      width: 1.3%;
      float: left;
      position: absolute;
      right: 0px;
      height: 100%;
      margin: 0;
}

それがどのように機能するのか、私にはよくわかりません。これが私のサイトの最後の部分であるため、誰かが同じ結果を達成するためのより良い方法を知っているなら、私は非常に感謝しています. 私の質問は、Firefox の右側の境界線にある余分な 1 ピクセルを取り除く方法を知っている人はいますか? Safari と Chrome で完璧に見えます。どんな助けやアドバイスも命の恩人です。

上記のコードの JSFiddle

4

2 に答える 2

0

positionさまざまなレベルで要素にスタイルが適用されるため、機能します。ここでは、そのトピックに関する詳細情報を示します。

ラッピング要素.contentAndBordersは、その子要素と同様に展開されます.mainContentProjectPage。このため、100% の高さ (実際には思ったようには機能しません) 絶対に配置されたサイド要素は、垂直方向のスペースを埋めるために拡張されます。

側面のスペースに塗りつぶし以外のものを含める必要がない限り、これはおそらく適切な方法ではありません。代わりに、ボックス モデルの原則に従い、border-leftとborder-rightを組み合わせて使用​​しpaddingて、目的の外観とレイアウトを実現します。

サイド ピースにパターン フィルまたはコンテンツが必要な場合は、絶対配置ソリューションを使用できますが、フロートのほとんどは不要であり、価値がある以上の問題を引き起こす可能性があります。

試す：

.contentAndBorders {
      幅: 950px;
      位置: 相対;
}
.mainContentProjectPage {
      背景色: #F55816;
      マージン: 0 1.3%;
      パディング: 10px;
}
.borderLeft、.borderRight{
      背景色: #FFF;
      幅: 1.3%;
      位置: 絶対;
      上:0px;
      高さ: 100%; /* Webkit 以外のブラウザーでは、これは実際には親要素の幅を表している可能性があることに注意してください */
}
.borderLeft {
      左: 0px;
}
.borderRight {
      右: 0px;
}

1.3% が偶数のピクセルに分割されない場合、ブラウザーは常に何をすべきかを認識していないため、わずかな差異が生じる可能性があります。

于 2012-12-28T20:17:49.703 に答える
0

余分な境界線関連のコードをすべて取り除き (つまり、マークアップと css から borderLeft と borderRight div を削除します)、次の css を projectPageWrapper div に適用するだけです。

#projectPageWrapper { 
  border: 10px solid white;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}
于 2012-12-28T19:53:44.987 に答える