Css 如何使div相邻居中，且每个div周围的空间相等_Css_Layout_Positioning

Css 如何使div相邻居中，且每个div周围的空间相等

css layout

Css 如何使div相邻居中，且每个div周围的空间相等,css,layout,positioning,Css,Layout,Positioning,我的两个相同宽度的div没有相邻显示。我有一些三位一体的CSS方法，但它不起作用。有人能告诉我哪里出了问题吗写下这个我的HTML是： <article class="left"> <header> <h2 class="headline">A little bit about me</h2> </header>

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

干杯

删除

边距：0自动
使用margin:0 auto
将div居中您应该稍微更改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>

为什么不使用一个类呢？
例如：
你可以看到效果如果你在这里感到无聊，在其他地方做点别的事情。谢谢
<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>

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

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

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