Question

我目前有两个div包含不同的图像和文字。他们使用相同的css样式.cheese_people我需要在两个框的中间创建一个边距。我该怎么做？

我真的需要两个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%;
        }

Answer 1

这只会影响第二个div：

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

Answer 2

如果你想在两个div之间留一个空格，你可以尝试给一个id，然后在ID中添加CSS（只添加margin-right：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;
    }

Answer 3

也许你可以在第一个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;
       }

这样，如果您需要将此边距添加到其他div，您只需将其添加到类

Answer 4

使用

float:left
float:right

对于图像和文本

在CSS类

中

使用相应的

Answer 5

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

.cheese_people:last-child {float: right}

如何在两个独立的div之间创建边距？

5 个答案: