1

我的两个同样宽的 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

去除那个margin: 0 auto;

与margin: 0 auto您一起使 div 居中

于 2012-09-05T22:02:40.470 回答
1

你为什么不只使用一个类？例子：

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

你可以在这里看到效果

于 2012-09-05T22:14:04.687 回答
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 回答