0

这是我为网页中的一个部分所拥有的 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 和。float:left只给divpubthumb和父 div

#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 的类（只有在 html 文档中唯一的 ID 才能使用）

<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 回答
0

您必须为#singlepublication 使用不同的 ID。将 #singlepublication 替换为 .singlepublication。

于 2013-07-01T11:36:43.683 回答