Question

我正在尝试为我的.slotIcon类添加填充。我的.slots类是容器，女巫是另一个div的内联块，试图将两个div并排（50％宽度）。

这完全属于“工作”部分。

现在填充不会影响图标，边距会移动整个.slots div。

我想要做的只是略微降低.slots div中的图标和文字。

 <div  class="work" >
    <h2>Work</h2>

    <div class="slots">

        <div class="slotIcon"></div>
            <p>Slots</p>
    </div><div class="OEA">

        <div class="OEAicon"></div>
            <p>OEA</p>
    </div>

</div>

的CSS：

.slots {
display: inline-block;
width: 50%;
height: 350px;
background-color: #3484ce;
}



.OEA {
display: inline-block;
width: 50%;
height: 350px;
background-color: green;
}

.slotIcon {
width: 150px;
height: 159px;
background-repeat: no-repeat;
background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
margin-left: auto;
margin-right: auto;
}



.OEAicon {
width: 200px;
height: 159px;
background-repeat: no-repeat;
background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
margin-left: auto;
margin-right: auto;

}

https://jsfiddle.net/js1rgh4b/1/

Answer 1

请试试这个，

.slots {
    display: inline-block;
    width: 50%;
    height: 350px;
    background-color: #3484ce;
    padding-top:60px;
}



.OEA {
    display: inline-block;
    width: 50%;
    height: 350px;
    background-color: green;
    padding-top:60px;
}

Answer 2

如果您向padding提供.slots，则可行。如果您希望它们相似，则需要对.OEAicon执行相同的操作。如果没有，请在vertical-align: top;中进行.OEA。

Answer 3

您可以将填充设置为.slots和.OEA div，这会使文字和图标降下来。而不是display: inline-block，您可以使用float:left使div并排排列。

<强> DEMO

<强> CSS：

.slots {
    float:left;
    width: 50%;
    height: 350px;
    background-color: #3484ce;
    padding:60px;
}
.OEA {
    float:left;
    padding:60px;
    width: 50%;
    height: 350px;
    background-color: green;
}

填充不适用于div图标

3 个答案: