0

これは、Web ページの一部のセクションに使用する HTML です。私はCSSにいくつかの間違いを犯していますが、それが正確に何であるかを理解することはできません...

<div id="publications">
    <div id="singlepublication">
        <div id="pubthumb"><a href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px"></a></div>
        <div id="pubheading">Photography by Waruna Gomis</div>
        <div id="pubdesc"> <p>This is a book about the architectural photography done by Architect Waruna Gomis <p></div> 
        <div id="publink"> Link or Buy the Publication </div>
    </div>
    <div id="singlepublication">
        <div id="pubthumb"><a href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px"></a></div>
        <div id="pubheading">Photography by Waruna Gomis</div>
        <div id="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></div>
        <div id="publink"> Link or Buy the Publication </div>
    </div>
    <div id="singlepublication">
        <div id="pubthumb"><a href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px"></a></div>
        <div id="pubheading">Photography by Waruna Gomis</div>
        <div id="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></div>
        <div id="publink"> Link or Buy the Publication </div>
    </div>
</div>

それに適切なCSSを入れることができませんでした：

#publications {
width: 798px;
height: 720px;
}

#singlepublication {
float: left;
height: 150px;
width: 789px;
border: #FFF thin solid;
padding: 2px;
margin-left :3px;
margin-top: 2px;
}

#pubthumb {
position: absolute;
float: left;
width: 100px;
height: 140px;
padding: 5px 10px 5px 10px;
border-right:#CCC thin solid;
}

#pubheading {
position: absolute;
float: left;
color: #FFF;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size:16px;
padding: 15px 10px 10px 10px;
margin-left: 5px;
border-bottom: #999 thin solid;
width: 650px;
}

#pubdesc {
float: left;
position: absolute;
padding: 5px;
margin-left: 5px;
width: 789px;
}

#pubdesc p {
color: #FFF;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size: 10px;
}

#publink {
float: left;
}

ここで何がうまくいかないのか本当にわかりません....どんな助けもいただければ幸いです。

4

3 に答える 3

2

float :leftすべての div からposition:absolute を削除します。divと親 divfloat:leftのみに付与pubthumb

#publications {
width: 798px;
height: 720px;
}

#singlepublication {
float: left;
height: 150px;
width: 789px;
border: #FFF thin solid;
padding: 2px;
margin-left :3px;
margin-top: 2px;
}

#pubthumb {
float: left;
width: 100px;
height: 140px;
padding: 5px 10px 5px 10px;
border-right:#CCC thin solid;
}

#pubheading {
color: red;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size:16px;
padding: 15px 10px 10px 10px;
margin-left: 15px;
border-bottom: #999 thin solid;
width: 650px;
}

#pubdesc {
padding: 5px;
margin-left: 5px;
width: 789px;
}

#pubdesc p {
color: #000;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size: 10px;
}

#publink {
}

デモ

于 2013-07-01T11:42:26.100 に答える
0

コードを少し絞り込みます。私はいくつかのステップで説明しようとします：

ステップ 1. - ID のクラスを作成します (ID は、HTML ドキュメント内で一意である場合にのみ使用する必要があります)。

<div id="singlepublication">
    <div class="pubthumb"><a href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px"></a></div>
    <div class="pubheading">Photography by Waruna Gomis</div>
    <div class="pubdesc"> <p>This is a book about the architectural photography done by Architect Waruna Gomis <p></div> 
    <div class="publink"> Link or Buy the Publication </div>
</div>

#pubthumb、#pubheading、#pubdesc、#publink の代わりに、css で .pubthumb、.pubheading、.pubdesc、および .publink として参照します。

ステップ 2. -必要な場合にのみ要素を使用します。

<div class="singlepublication">
    <a class="pubthumb" href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px"></a>
    <div class="description">
        <h2>Photography by Waruna Gomis</h2>
        <span class="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></span>
        <a href="#">Link or Buy the Publication</a>
    </div>  
</div>

画像に div を使用する代わりに、画像タグにクラスを設定し、css を画像に直接適用します。異なるコンテンツごとに div を作成しないでください。ヘッダーがある場合は、ヘッダー タグを使用します ( h2)。実行可能な場合に使用<span>します。div 内でリンクをラップする代わりにリンクのスタイルを設定し、ラッパーのスタイルを設定します。

ステップ 3 -古い幅/高さ (画像用) を使用しないでください。幅と高さも css 内で表現する必要があります。

ステップ 4 - clearfix を使用する- clearfix が実際に何であるかを示す適切なリンクは次のとおりです: clearfixとは何ですか?

上記に基づいて、コードは次のようになります。

CSS

#publications {
width: 798px;
height: 720px;
}

.singlepublication {
position:relative;
width: 789px;
border: #FFF thin solid;
padding: 2px;
margin-left :3px;
margin-top: 2px;
}

.pubthumb {
position:relative;
float:left;
width: 100px;
height: 140px;
padding: 5px 10px 5px 10px;
border-right:#CCC thin solid;
}

.description {
position:relative;
float:left;
background:blue;
width:500px;
}

.description h2 {
color: #FFF;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size:16px;
padding: 15px 10px 10px 10px;
margin-left: 5px;
border-bottom: #999 thin solid;
}

.pubdesc {
padding: 5px;
margin-left: 5px;
width: 789px;
}

.pubdesc p {
color: #FFF;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size: 10px;
}

.description a {
/* style the link as you wish */
}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

html

<div id="publications">
    <div class="singlepublication clearfix">
        <a class="pubthumb" href="#"><img src="siteimages/imagetest.jpg" alt="" /></a>
        <div class="description">
            <h2>Photography by Waruna Gomis</h2>
            <span class="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></span>
            <a href="#">Link or Buy the Publication</a>
        </div>  
    </div>
    <div class="singlepublication clearfix">
        <a class="pubthumb" href="#"><img src="siteimages/imagetest.jpg" alt="" /></a>
        <div class="description">
            <h2>Photography by Waruna Gomis</h2>
            <span class="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></span>
            <a href="#">Link or Buy the Publication</a>
        </div>  
    </div>
    <div class="singlepublication clearfix">
        <a class="pubthumb" href="#"><img src="siteimages/imagetest.jpg" alt="" /></a>
        <div class="description">
            <h2>Photography by Waruna Gomis</h2>
            <span class="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></span>
            <a href="#">Link or Buy the Publication</a>
        </div>  
    </div>
</div>

float:left は pubthumb (左側の画像) と description-div (画像の右側のすべて) にのみ適用されることに注意してください。

何かを設計し始める (または学習を始める) 際のヒント:

  1. 設計中の div またはコンテンツ領域に一時的に異なる背景色を追加します。これにより、div が配置されている場所を簡単に確認できます。
  2. FireBug または Chromebug を使用します (非常に簡単になります) ( http://getfirebug.com/ ), ( https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench )
  3. IE 用に設計する場合は、いくつかのロジックを取得しようとしないでください。グーグルで検索して修正して、IEでもデザインが機能するようにしてください。
于 2013-07-01T13:01:53.947 に答える