Question

好吧基本上我一直在乱搞HTML并且我一直试图用图像滑块模仿这些网站，然后在底部发短信（不重要）而且我遇到了一些我无法做到的事情正确对齐。我试过把它作为一个列表并使用各种CSS方法。这是我到目前为止的代码（忽略其中的文本）

HTML：

<html>

<head>
    <title>Test</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<section id="main">

      <article class="signup">
            <hgroup>
                <h1>Sign Up Now!</h1>
                <h2>Stay Updated with the latest news</h2>
            </hgroup>
            <p>Sign up now and be emailed upon a new tutorial and recieve our weekly newsletter! Not only that, but you also
            get to comment and do other cool stuff!</p>
            <footer>
                <a href="#">Sign Up</a>
            </footer>
       </article>
        <article class="tuts">
            <hgroup>
                <h1>Follow Some Tutorials</h1>
                <h2>Learn Some!</h2>
            </hgroup>
            <p>This site offers many tutorials from Programmming to Physics to Chemistry to Networking to basically anything, and
            you guys also get to vote for some new tutorials!</p>
            <footer>
                <a href="#">Tutorials</a>
            </footer>
       </article>
  </section>

</body>

CSS：

#main article{
    float: left;
    display: block;
    padding: 0; 
    padding-left: 20px;

}

#main{
    display: block;
    float: left;
    width: 100%;
    vertical-align:middle;
    clear: both;
}
.signup{
    width: 33%;
    height: auto;
    margin-right: 66%;
    padding-left: 10px;
    text-align: left;
    border-left: 1px solid #ccc;
    width: 33%;
    display: block;
}
.tuts{
    width: 33%;
    height: auto;
    margin-left: 33%;
    margin-right: 33%;
    text-align: left;
    border-left: 1px solid #ccc;
    width: 33%;
    display: block;
}

由于似乎不清楚，我要求基本上对齐文章，以便在提供的代码的教程部分之上没有填充/边距。所以基本上类似于navmenu，列表是对齐的（我使用CSS代码完成了这个，但由于某种原因它不适用于此）。因此，如果不清楚，基本上只是将两篇文章对齐，使它们并排接触，两者之上或之下都没有边距。只是垂直对齐。

对不起，我真的不知道如何解释，但我希望我提供的内容应该足够了。：/

Answer 1

要让它们并排“浮动”，只需从margin中删除article。

http://jsfiddle.net/ZjLtV/1/

.signup{
    width: 33%;
    height: auto;
    /*margin-right: 66%;*/
    padding-left: 10px;
    text-align: left;
    border-left: 1px solid #ccc;
    width: 33%;
    display: block;
}
.tuts{
    width: 33%;
    height: auto;
    /*margin-left: 33%;
    margin-right: 33%;*/
    text-align: left;
    border-left: 1px solid #ccc;
    width: 33%;
    display: block;
}

在HTML中对齐文章

1 个答案: