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 コードを使用してこれを実行しましたが、何らかの理由でこれが機能しません)。したがって、明確でない場合は、基本的に 2 つの記事を並べて、上下どちらにも余白を設けずに並べるだけです。縦に並べるだけ。

申し訳ありませんが、説明する方法がよくわかりませんが、私が提供したものが十分であることを願っています. :/

4

1 に答える 1

2

それらを並べて「フロート」させるには、marginsからsを削除するだけ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;
}
于 2013-02-25T13:38:25.603 に答える