0

好的，所以基本上我一直在搞乱 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 代码完成了此操作，但由于某种原因它不起作用）。因此，如果不清楚，基本上只是将两篇文章对齐，使它们并排接触，在任何一个顶部或任何一个下方都没有边距。只是垂直对齐。

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

4

1 回答 1

2

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

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;
}
于 2013-02-25T13:38:25.603 回答