Question

我正在尝试使用以下代码：

<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;
}

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

Answer 1

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

.classname {
    /*styling rules*/
}

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

Answer 2

您正尝试将三个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;
}

Answer 3

以下是一些问题：

首先，你有一个文章里面有一个文章，从我所知道的是没有必要，因为文章可以取代div。然后你有一个p来保存header，文章正文和footer, when p s should never have header elements ( h1 , h3等等，即使在较旧的规范中它也会中断使用article标记的想法。

第二，如上所述，你有三个具有相同身份的div。

第三，你正在使用主要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;
}

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

我承认我不清楚为什么必须将部分（或div或其他）设置为绝对的浮动实际上将其他部分推到一边，但我相信其他人可以清除它

让<divs>彼此相邻对齐</divs>

3 个答案:

HTML：

CSS：