如何使div彼此相邻，每个div的周围有相同的空间

我的两个宽度相同的div并不相邻显示。我有三元组的方法，但它没有奏效。有人能告诉我哪里有错吗？如何使div彼此相邻，每个div的周围有相同的空间

我的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; 
}

干杯

来源

2012-09-05 Linards Berzins

如果你厌倦这里做别的事情多数民众赞成在别的地方一个 –

删除margin: 0 auto;

随着margin: 0 auto你为中心的div

来源

2012-09-05 22:02:40 Mark

。您好 –

你应该改变一下你的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-05 22:08:01

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

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

你可以看到效果here

来源

2012-09-05 22:14:04 phaberest

看起来很好的解决方案，谢谢。我稍后再尝试一下 –

如何使div彼此相邻，每个div的周围有相同的空间

回答

相关问题