1

幅が同じ 2 つの div が隣り合って表示されません。いくつかの CSS アプローチをトライしましたが、うまくいきませんでした。誰かが私がどこで間違っているのか教えてもらえますか?

私のHTMLは：

 <article class="left">
                    <header>
                       <h2 class="headline">A little bit about me</h2>
                    </header>
                            <p class="custom_font">After working for more than 10 years at a numerous five star hotels and restaurants 
                               around the world as a pastry chef, I decided to start my own litte business to give the 
                               chance for every one to taste my favourite recipes from all those years.</p>
            </article>
             <article class="right">
                    <header>
                         <h2 class="headline">Article title</h2>
                    </header>
                            <p class="custom_font">At My Treat we handmake delicious treats made from finest organic ingredients. 
                               Always fresh never frozen.</p>
            </article>

そして私のCSS：

.left {
float: right;
width: 50%;
margin: 0 auto;
}

.right {
float: left;
width: 50%;
margin: 0 auto;
}

乾杯

4

3 に答える 3

1

1 つのクラスだけを使用しないのはなぜですか。例：

article {
    float: left;
    width: 50%;
    display: block;
}

ここで効果を確認できます

于 2012-09-05T22:14:04.687 に答える
1

を削除しますmargin: 0 auto;

margin: 0 autoあなたはdivを中央に配置しています

于 2012-09-05T22:02:40.470 に答える
0

html を少し変更する必要があります。これを試してください：

<html>
    <head>        
        <link rel="stylesheet" type="text/css" href="class.css" />
    </head>

    <body>
        <div class="left">

                       <h2 class="headline">A little bit about me</h2>

                            <p class="custom_font">After working for more than 10 years at a numerous five star hotels and restaurants 
                               around the world as a pastry chef, I decided to start my own litte business to give the 
                               chance for every one to taste my favourite recipes from all those years.</p>
            </div>
             <div class="right">

                         <h2 class="headline">Article title</h2>

                            <p class="custom_font">At My Treat we handmake delicious treats made from finest organic ingredients. 
                               Always fresh never frozen.</p>
            </div>

    </body>

</html>

css スタイルシートは同じです:

.left {
float: right;
width: 50%;
margin: 0 auto;
}

.right {
float: left;
width: 50%;
margin: 0 auto;
}
于 2012-09-05T22:08:01.537 に答える