Question

我正在为一个学校项目制作一个“摇滚，纸，诡计”。到目前为止，我刚刚完成了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>

Answer 1

如果您愿意更改HTML，我建议将每个img和caption打包在一个容器中。

示例：

＆＃13;

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;

Answer 2

对于快速解决方案，将.caption置于带有img

的div中

＆＃13;

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;

更改弹性框上的边距属性

2 个答案: