我正在为一个学校项目制作一个“摇滚,纸,诡计”。到目前为止,我刚刚完成了html-part,我现在正在研究css-part,然后再继续使用javascript。无论如何,我的问题是我试图在我放入的四张图片下面制作字幕,但显示:flex和flex:1 0 auto; tag - 我用来在同一个p-tag中的单词之间创建空格 - 不要给我单词之间所需的像素数量。如何自定义弹性框之间的边距?
body {
background-color: #aa99ff;
font-family: 'Exo 2', sans-serif;
}
img {
border: 5px dotted black;
margin: 10px;
margin-bottom: 0;
}
.caption {
margin-left: 10px;
margin-top: 0;
display: inline;
flex: 1 0 auto;
}
p {
margin-left: 10px;
}
#innpakning {
width: 980px;
height: 700px;
}
#tekst {
display: flex;
}
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<div id="innpakning">
<p id="spillerPoeng"> <b>Spiller:</b> 0 </p>
<p id="maskinPoeng"> <b>Maskin:</b> 0 </p>
<img src="stein.png"
alt="spiller stein" id="stein" width="150" height="200">
<img src="saks.png"
alt="spiller saks" id="saks" width="150" height="200">
<img src="papir.png"
alt="spiller papir" id="papir" width="150" height="200">
<img src="ukjent.png"
alt="spiller stein" id="stein" width="150" height="200">
<br>
<div id="tekst">
<p class="caption"> Stein</p>
<p class="caption"> Saks</p>
<p class="caption"> Papir</p>
<p class="caption"> Maskin</p>
</div>
<p id="info"></p>
</div>
答案 0 :(得分:0)
如果您愿意更改HTML
,我建议将每个img
和caption
打包在一个容器中。
示例:
body {
background-color: #aa99ff;
font-family: 'Exo 2', sans-serif;
}
#innpakning {
height: 700px;
}
.content {
display: flex;
padding-top: 15px;
}
.box:not(:last-of-type) {
margin-right: 15px;
}
img {
border: 5px dotted black;
}
.caption {
margin: 0;
}
&#13;
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<div id="innpakning">
<p id="spillerPoeng"> <b>Spiller:</b> 0 </p>
<p id="maskinPoeng"> <b>Maskin:</b> 0 </p>
<div class="content">
<div class="box">
<img src="stein.png" alt="spiller stein" id="stein" width="150" height="200">
<p class="caption"> Stein</p>
</div>
<div class="box">
<img src="stein.png" alt="spiller stein" id="stein" width="150" height="200">
<p class="caption"> Stein</p>
</div>
<div class="box">
<img src="stein.png" alt="spiller stein" id="stein" width="150" height="200">
<p class="caption"> Stein</p>
</div>
<div class="box">
<img src="stein.png" alt="spiller stein" id="stein" width="150" height="200">
<p class="caption"> Stein</p>
</div>
</div>
<p id="info"></p>
</div>
&#13;
答案 1 :(得分:0)
对于快速解决方案,将.caption
置于带有img
body {
background-color: #aa99ff;
font-family: 'Exo 2', sans-serif;
}
img {
border: 5px dotted black;
margin: 10px;
margin-bottom: 0;
}
.caption {
margin-left: 10px;
margin-top: 0;
display: inline;
}
p {
margin-left: 10px;
}
#innpakning {
width: 980px;
height: 700px;
}
#tekst {
display: flex;
}
.gameOption{
float: left;
display: table;
}
.gameOption img{
display: table-row;
}
.gameOption .caption{
font-weight: bold;
}
&#13;
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<div id="innpakning">
<p id="spillerPoeng"> <b>Spiller:</b> 0 </p>
<p id="maskinPoeng"> <b>Maskin:</b> 0 </p>
<div class="gameOption">
<img src="stein.png"
alt="spiller stein" id="stein" width="150" height="200">
<p class="caption">Stein</p>
</div>
<div class="gameOption">
<img src="saks.png"
alt="spiller saks" id="saks" width="150" height="200">
<p class="caption">Saks</p>
</div>
<div class="gameOption">
<img src="papir.png"
alt="spiller papir" id="papir" width="150" height="200">
<p class="caption">Papir</p>
</div>
<div class="gameOption">
<img src="ukjent.png"
alt="spiller stein" id="stein" width="150" height="200">
<p class="caption">Maskin</p>
</div>
<br>
<div id="tekst">
</div>
<p id="info"></p>
</div>
&#13;