4

私はこれについての答えを探していて、それを無駄に修正するための複数の方法を試しました。サイトを再構築しながらCSSを学んでいますが、小さな問題があります。

親コンテナ内にコンテナがあります。「サブコンテナ」（より適切な用語がないため）には、独自のヘッダー、左側に写真、右側にコピーがあります。コピーは写真の上部に揃え、写真の右端とサブコンテナの背景画像の右端の間に等間隔に配置する必要があります。私が得ているのは、写真の右下隅にコピーを突き合わせた、適切な場所にある写真です。

問題は知識の欠如と何が何を引き起こしているのかについての誤解の混合であると私はかなり確信しています...それでこれに関するどんな助けも大いに感謝されます。

これが私のCSSです：

#wrapper {
  background-image:url("images/About/Copy-Block.png");
  background-repeat:no-repeat;
  width: 745px;
  height: 339px;
  margin: 0 auto;
  margin-top: 30px;
}

#wrapper head {
  display:block;
  padding-top: 15px;
  padding-bottom: 2px;
}

#wrapper photo {
  float: left;
}

.wrapcopy {
  padding-left: 90px;
  font-size: 13px;
  color: #FFF;
}

そしてここに私のhtmlがあります：

<div id="wrapper">
  <div id="wrapper head" align="center">
    <img src="images/About/About-Us-Subhead.png" width="748" height="116" />
  </div>
  <div class="wrapcopy">
    <img src="images/About/image.png" width="257" height="194" class="wrapper photo"/>
    <i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</i>
  </div>
</div>
4

4 に答える 4

4

CSSで「img」の代わりに「photo」と書いたので、このように編集すればうまくいきます！

#wrapper img{
float: left;
}

ただし、例には2つの画像があり、これにより両方がフロートします。たとえば、これらの画像にID/クラスを指定することでこれを解決できます。

于 2012-09-07T14:50:04.930 に答える
3

まず、クラスを適切に参照していません。「＃wra​​pperphoto」は「#wrapper.photo」である必要があります。また、IDにスペースを含めることはできません（「#wrapperhead」）。

必要な間隔を追加する方法はいくつかあります。最も簡単な方法は、画像に直接パディングを追加することです。

#wrapper .photo { float: left; padding-right: 10px }

また、使用しているマークアップが非常に貧弱であることも指摘しておきます。見出しはh1-h6タグに入れる必要があり（画像はこれらのタグで引き続き許可されます！）、テキストの段落はpタグに入れる必要があります。セクションタグまたは記事タグは、ラッパーdivの適切な代替品である可能性があります。CSSを知るだけでは十分ではありません。また、CSSに対応するための適切なHTMLマークアップも知っておく必要があります。

これを行うためのより効率的な方法は次のようになります。

section.foo {
    background-image:url("images/About/Copy-Block.png");
    background-repeat:no-repeat;
    width: 745px;
    height: 339px;
    margin: 0 auto;
    margin-top: 30px;
}
section.foo h1 {
    padding-top: 15px;
    padding-bottom: 2px;
    text-align: center;
}
section.foo p {
    padding-left: 90px;
    font-size: 13px;
    color: #FFF;
    font-style: italic;
}
section.foo p img {
    float: left;
    padding-right: 10px;
}

そしてHTML：

<section class="foo">
<h1><img src="images/About/About-Us-Subhead.png" width="748" height="116" /></h1>

<p><img src="images/About/image.png" width="257" height="194" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</section>
于 2012-09-07T14:59:30.713 に答える
1

まず、IDに名前を付けるスペースは絶対に使用しないでください。

したがってid="wrapper head"、id=に変更しますid="wrapper_head"

次に、要素はタグで選択できます。
画像は<imgタグでコード化されているため、CSSで直接選択できますimg { }。

あなたの場合、#wrapper分割内の画像を選択したいので、次のように選択します。

 #wrapper img 
  {
   /* Code Here... */
  }
于 2012-09-07T14:59:06.543 に答える
0

コードの問題は、idタグのスペースです。
次のようなものを試してください

<div id="wrapper_head" ....

それ以外の 

<div id="wrapper head" ....

それはあなたの問題を解決するはずです！

于 2012-09-07T15:00:50.153 に答える