如何在兩個獨立的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之間創建保證金？

回答

相關問題