1

我有以下代码正在尝试正常工作：

<div id="newspost_bg">
                    <article>
                        <p>
                        <header><h3>The fast red fox!</h3></header>
                        This is where the article resides in the article tag. This is good for SEO optimization.
                        <footer>Read More..</footer>
                        </p>
                    </article>
                </div>
                <div id="newspost_bg">
                    hello
                </div>
                <div id="newspost_bg">
                    hello
                </div>
                <div id="advertisement">
                    <script type="text/javascript"><!--
google_ad_client = "ca-pub-2139701283631933";
/* testing site */
google_ad_slot = "4831288817";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
                </div>

这是随之而来的css：

#newspost_bg{
    position: relative;
    background-color: #d9dde1;
    width:700px;
    height:250px;
    margin: 10px;
    margin-left: 20px;
    border: solid 10px #1d2631;
    float:left;
}

#newspost_bg article{
    position: relative;
    margin-left: 20px;
}
#advertisement{
    float: left;
    background-color: #d9dde1;
    width: 125px;
    height: 605px;
    margin: 10px;
}

我遇到的问题是我试图设置的广告将与最后一个与 newspost_bg 的 id 对齐，但我希望它与它所在的容器的顶部对齐。我不知道这是否足够信息，如果没有，请告诉我您可能需要什么。我是网络编码领域的新手，所以任何和所有的批评都对我有帮助。

4

3 回答 3

0

我立即看到的第一个问题是您将相同的 ID 分配给多个元素。您只能为每个元素分配一个唯一 ID。你想要的可能是类，它在 CSS 中是这样访问的：

.classname {
    /*styling rules*/
}

接下来，页面将按照文章在 HTML 中的顺序显示文章。这意味着您不能（明智地）使用 CSS 使 HTML 中的最后一篇文章成为列表中的第一篇。您可以使用 javascript 对它们进行重新排序，但这并不容易。看起来您要创建的是需要服务器端功能的网页，否则您将不得不在旧文章之前手动编写每篇文章。

于 2012-04-09T23:12:11.293 回答
0

您正在尝试将三个 div 宽度 700px 配置为彼此相邻对齐。除非屏幕真的很大，否则这是极其复杂的。

除此之外，您使用的是相同的 id，这在语义上是不正确的。改为给出类名。

然后将你的css修改成这样

.newspost_bg{
    position: relative;
    background-color: #d9dde1;
    width:700px;
    height:250px;
    margin: 10px;
    margin-left: 20px;
    border: solid 10px #1d2631;
    float:left;
}

.newspost_bg article{
    position: relative;
    margin-left: 20px;
}
于 2012-04-09T23:12:25.447 回答
0

这里有几个问题：

首先，你有一个div，里面有一篇文章，据我所知，这不是必需的，因为文章可以代替div。然后，即使在较旧的规范中，您也p可以保存header, 文章正文和footer, when p s should never have header elements (h1, h3等），这打破了使用article标签的想法。

其次，如前所述，您有三个 div 都具有相同的 id。

第三，您对主 div 使用相对定位，我认为这对浮动没有帮助（也许我错了），而相对定位实际上只对绝对定位的子元素有帮助。

说了最后一点，我可能是错的，因为以下内容对我有用：

HTML：

<section id="articles">
    <article class="newspost_bg">
        <header><h3>The fast red fox!</h3></header>
            <p>This is where the article resides in the article tag. This is good for SEO optimization.</p>
        <footer>Read More..</footer>
    </article>
    <article class="newspost_bg">
        hello
    </article>
    <article class="newspost_bg">
    hello
    </article>
</section>
<aside id="advertisement">
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-2139701283631933";
    /* testing site */
    google_ad_slot = "4831288817";
    google_ad_width = 120;
    google_ad_height = 600;
    //-->
    </script>
</aside>

请注意，我使用一个section元素来包装article元素并使用aside广告块。您可以将 div 放入其中以用于进一步的目的，但上面是一个轻量级、实用程序包装免费文档，我认为这是在添加更多 div 等之前开始的好地方。

CSS：

#articles {
 position: absolute;   
}
#articles > article {
    background-color: #d9dde1;
    width:300px;
    height:250px;
    margin: 10px;
    margin-left: 20px;
    margin-right: -140px;
    border: solid 10px #1d2631;
}

#advertisement {
    float: right;
    background-color: #d9dde1;
    width: 125px;
    height: 605px;
    margin: 10px;
    border: 1px dashed black;
}​

请注意，该部分作为文章元素的包装器被设置为绝对，并且没有为文章设置其他定位、浮动或负边距。aside 设置为向右浮动，这使它浮动到它的父级（在这种情况下，我们假设 body 或 html 标记）也是该部分的父级的顶部，因此它们是并排的。

我承认我不清楚为什么必须将部分（或 div 或其他）设置为绝对值才能使浮动实际将其他部分推到一边，但我相信这里的其他人可以解决这个问题。

于 2012-04-10T01:09:37.113 回答