0

我目前有两个 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%;
        }
4

5 回答 5

1

这只会影响第二个 div：

div.cheese_people + div.cheese_people{
    margin-left: 10px;
}
于 2013-08-21T20:55:56.507 回答
0

如果你想在两个 div 之间有一个空格，你可以尝试给一个 id，然后将 CSS 添加到 ID（只添加 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;
    }
于 2013-08-21T20:55:59.370 回答
0

也许您可以向第一个 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，您只需给它类

于 2013-08-21T20:57:34.287 回答
0

采用

float:left
float:right

图像和文本

在 CSS 类中

相应地使用

于 2013-08-21T20:59:44.687 回答
0

我不确定你想要两个 div 之间的边距。您可能希望一个贴在左边，另一个贴在右边（我这么说是因为45%）。然后，使用这个：

.cheese_people:last-child {float: right}
于 2013-08-21T21:03:11.980 回答