填充不适用于 div 图标
Padding not working for divs icons
我正在尝试向我的 .slotIcon class 添加填充。我的 .slots class 是容器, 是与另一个 div 的内联块,试图使两个 div 并排(50% 宽度)。
这些都在 "work" 部分。
现在填充不会影响图标,边距会移动整个 .slots div。
我想做的只是稍微降低图标和文本,在 .slots div.
https://jsfiddle.net/js1rgh4b/1/
<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;
}
如果你给 padding
到 .slots
,它会起作用。如果您希望它们相似,则需要对 .OEAicon
执行相同的操作。如果没有,则在 .OEA
.
中执行 vertical-align: top;
你可以设置 padding 为 .slots
和 .OEA div
,这将使文本和图标下降。而不是 display: inline-block
,您可以使用 float:left
使 div 并排对齐。
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;
}
请试试这个,
.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;
}
我正在尝试向我的 .slotIcon class 添加填充。我的 .slots class 是容器, 是与另一个 div 的内联块,试图使两个 div 并排(50% 宽度)。
这些都在 "work" 部分。
现在填充不会影响图标,边距会移动整个 .slots div。
我想做的只是稍微降低图标和文本,在 .slots div.
https://jsfiddle.net/js1rgh4b/1/
<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;
}
如果你给 padding
到 .slots
,它会起作用。如果您希望它们相似,则需要对 .OEAicon
执行相同的操作。如果没有,则在 .OEA
.
vertical-align: top;
你可以设置 padding 为 .slots
和 .OEA div
,这将使文本和图标下降。而不是 display: inline-block
,您可以使用 float:left
使 div 并排对齐。
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;
}
请试试这个,
.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;
}