如何在两个独立的div之间创建保证金？

我有两个div在此刻包含不同的图像和文字。他们使用相同的css样式.cheese_people我需要在两个框的中间创建一个边距。我将如何做到这一点？如何在两个独立的div之间创建保证金？

也我真的需要两个div来做到这一点？我这样做的唯一原因是让他们在同一个网格线上。

  <div class=" grid 6 cheese_people"> 
     <img class="people_photo" src="img/cheese_expert.jpg"> 
     <h4>Chief Cheese Taster <br> Dave Le Conk</h4> 
     <p class="chesse_people">I've always had a passion for cheese - Now I get to taste it everyday!</p> 
    </div> 

    <div class=" grid 6 cheese_people"> 
     <img class="people_photo" src="img/cheese_owner.jpg"> 
     <h4>The Big Cheese Owner <br> Sally De Cheese</h4> 
     <p class="chesse_people">I wanted to create an online store that I'd would trust</p> 
    </div> 

     .cheese_people { 
     font-family: sans-serif; 
     background-color: #dec38c; 
     border:solid 3px #6b5221; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     border-radius: 5px; 
     float:left; 
     width:45%; 
     }

来源

2013-08-21 Dano007

您是否尝试添加'margin-right：10px;'例如？ – kunalbhat

您可以添加“margin-right”并将其从“最后一个孩子”中移除。 – Brewal

P.S.您不再需要为border-radius定义浏览器前缀：http://caniuse.com/#search=border-radius – kunalbhat

我不确定你想在两个div之间保证金。你可能想要一个粘在左边，另一个粘在右边（我说那是因为45%）。然后，使用此：

.cheese_people:last-child {float: right}

来源

2013-08-21 21:03:11 Brewal

这只会影响第二次DIV：

div.cheese_people + div.cheese_people{ 
    margin-left: 10px; 
}

来源

2013-08-21 20:55:56

'margin-left' no？ – Brewal

@Brewal，你是对的，我刚刚编辑它！ –

如果你希望这是两个div的之间的空间，你可以尝试是给一个ID，然后添加CSS到ID（只加边距 - 右：10px;如果你想在图像之间留出空间，并且没有其他地方，那么我会使用ID技术）给这个类添加一个右边距，就像这样

<div class=" grid 6 cheese_people" id="leftpic"> 
    <img class="people_photo" src="img/cheese_expert.jpg"> 
    <h4>Chief Cheese Taster <br> Dave Le Conk</h4> 
    <p class="chesse_people">I've always had a passion for cheese - Now I get to taste it everyday!</p> 
</div> 

<div class=" grid 6 cheese_people"> 
    <img class="people_photo" src="img/cheese_owner.jpg"> 
    <h4>The Big Cheese Owner <br> Sally De Cheese</h4> 
    <p class="chesse_people">I wanted to create an online store that I'd would trust</p> 
</div> 

    .cheese_people { 
    font-family: sans-serif; 
    background-color: #dec38c; 
    border:solid 3px #6b5221; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    float:left; 
    width:45%; 
    } 

    #leftpic { 
     margin-right: 10px; 
    }

来源

2013-08-21 20:55:59 user216485

工作，欢呼！ – Dano007

也许你可以添加一个类的第一个div所以你给它的利润率

<div class=" grid 6 cheese_people margin-container"> 
     <img class="people_photo" src="img/cheese_expert.jpg"> 
     <h4>Chief Cheese Taster <br> Dave Le Conk</h4> 
     <p class="chesse_people">I've always had a passion for cheese - Now I get to taste it everyday!</p> 
    </div> 

    <div class=" grid 6 cheese_people"> 
     <img class="people_photo" src="img/cheese_owner.jpg"> 
     <h4>The Big Cheese Owner <br> Sally De Cheese</h4> 
     <p class="chesse_people">I wanted to create an online store that I'd would trust</p> 
    </div> 

     .cheese_people { 
     font-family: sans-serif; 
     background-color: #dec38c; 
     border:solid 3px #6b5221; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     border-radius: 5px; 
     float:left; 
     width:45%; 
     } 

     .margin-container { 
      margin-right: 2px solid black; 
     }

这样，如果你需要添加此保证金其他分区你只要给它的类

来源

2013-08-21 20:57:34

使用

float:left 
float:right

对于这两种图像和文本

在CSS类

使用相应

来源

2013-08-21 20:59:44

如何在两个独立的div之间创建保证金？

回答

相关问题