Question

我的两个相同宽度的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;
}

干杯

Answer 1

删除margin: 0 auto;

使用margin: 0 auto，您将以div为中心

Answer 2

你为什么不只使用一堂课？例如：

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

您可以看到效果here

Answer 3

你应该改变一下你的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;
}

如何将divs彼此相邻，每个周围的空间相等

3 个答案: