Question

我的目标是为少量图像设置一个div（它到目前为止工作），右边的一些文本的div和底部的文本的其他div。当我在missedletters div中添加文本时，它不知何故就会失败。我认为可能有display:inline-block的内容导致混乱，但我无法弄清楚它是什么。

重要的CSS：

＆＃13;

body {
  background-color: #303030;
  font-family: 'Source Code Pro', monospace;
  font-size: 28px;
}

body .arena {
  min-height: 400px;
  height: 50%;
  width: 50%;
  margin: auto;
  margin-top: 11.5%;
  background-color: darkseagreen;
  border-radius: 15px;
}

.poorguy {
  display: inline-block;
  vertical-align: top;
  margin-top: 12px;
  min-width: 360px;
  /* not sure if shouldn't be longer, but fits into it*/
  min-height: 300px;
  /* so i'll check it out in the process*/
  bottom: 0px;
}

.missedletters {
  vertical-align: top;
  display: inline-block;
  margin-top: 12px;
  min-height: 320px;
  min-width: 190px;
  left: 0px;
  bottom: 0px;
  word-wrap: break-word;
}

.correctletters {
  min-height: 80px;
  vertical-align: top;
  word-wrap: nowrap;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="background">
    <div class="arena">
      <div class="poorguy">
      </div>
      <div class="missedletters">
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

您只需要为missedletters div添加最大宽度/宽度。您可以使用float: left;代替display: inline-block;

Div在添加文本时移动，自动换行不起作用

1 个答案: