跨度不适合另一个跨度[重复]

Question

我尝试将 span 放入另一个 span，但由于某种原因它不起作用。

我已经尝试过display: flex 和display: flexbox。

JSFiddle

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  background-color: #f0f0f0;
}

#midbox {
  display: block;
  position: absolute;

  width: 90%;
  height: 85%;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);

  background-color: #7d7c7d;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}

#preview {
  display: block;
  position: relative;

  height: 100%;
  width: 35%;

  background-color: #525052;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}

#preview p {
  margin: 0;
  padding-top: 3%;
  font-size: 2em;
  opacity: 0.7;

  color: #f0f0f0;
  font-family: 'Lato', sans-serif;
  text-align: center;
}

#cont {
  display: block;
  position: relative;

  height: 100%;
  width: 35%;

  background-color: green;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}

<span id="midbox">
  <span id="preview">
    <p>Preview</p>
  </span>
  <span id="cont">
    <p>Why does this apper under the box and not on the left?</p>
  </span>
</span>

期望：

绿色背景的 span 内容应在浅灰色框内。

输出：

绿色背景的 span 内容在任何框之外。

Answer 1

你可以尝试添加 float:left;到您的#preview 跨度和#cont 跨度。向左浮动强制两个元素留在左侧。

#preview, #cont{
  float:left;
}

我更新了你的小提琴。试试这里的小提琴： https://jsfiddle.net/edy0whkp/

Answer 2

简答

您正在将 display: block 设置为您的 span 元素。这会将它们变成从新行开始的块元素，并且它们会扩展其父容器的大小。将显示更改为dispay: inline-block 将导致元素不开始新行，并且只占用它们需要的空间。

https://jsfiddle.net/xypntkc0/

更多详情

在 JSFiddle 中，我将父元素更改为 div。将其设置为 div 使其成为块组件，因此当它是 div 时您也不需要display: block。将块元素放在内联元素内是不好的做法（您有一个段落标签作为跨度标签的子标签）所以我实际上会将所有跨度标签更改为divs

我还将父组件上的位置更改为position: relative。您通常只想将absolute 设置为具有position: relative 的父组件内的子元素。父级设置为相对，以便其绝对定位的子级相对于父级定位相对。

更多细节

如果你想在容器内对齐元素，一个很好的工具是 flexbox。您可以将display: flex 设置为父元素以将其标记为弹性容器。然后孩子将自动设置为弹性项目，并排并排渲染，你就完成了。 https://jsfiddle.net/vkru8wg7/

Answer 3

您似乎正试图让#preview 和#cont 并排坐在#midbox 内。如果是这种情况，只需制作#midbox {display: flex;}

body {
  margin: 0;
  background-color: #f0f0f0;
}

#midbox {
  display: flex;
  position: absolute;
  width: 90%;
  height: 85%;
  top:0; right:0; bottom:0; left:0;
  margin:auto;
  background-color: #7d7c7d;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}

#preview {
  display: block;
  position: relative;
  width: 35%;
  background-color: #525052;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}

#preview p {
  margin: 0;
  padding-top: 3%;
  font-size: 2em;
  opacity: 0.7;
  color: #f0f0f0;
  font-family: 'Lato', sans-serif;
  text-align: center;
}

#cont {
  display: block;
  position: relative;
  width: 35%;
  background-color: green;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}

<span id="midbox">
  <span id="preview">
    <p>Preview</p>
  </span>
  <span id="cont">
    <p>Why does this apper under the box and not on the left?</p>
  </span>
</span>

如果你想了解 flexbox，https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 上有一篇很棒的文章