0

現在、異なる画像とテキストを含む 2 つの div があります。.cheese_people 2 つのボックスの中間の間にマージンを作成する必要があるのと同じ CSS スタイルを使用します。どうすればいいですか？

また、これを行うには本当に2つの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

これは 2 番目の div にのみ影響します。

div.cheese_people + div.cheese_people{
    margin-left: 10px;
}
于 2013-08-21T20:55:56.507 に答える
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

両方のdivの間にマージンが必要かどうかわかりません。1 つを左に貼り付け、もう 1 つを右に貼り付けたい場合があります ( の理由でそう言います45%)。次に、これを使用します：

.cheese_people:last-child {float: right}
于 2013-08-21T21:03:11.980 に答える
0

2 つの div の間にスペースを入れたい場合は、1 つに 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;
    }
于 2013-08-21T20:55:59.370 に答える