期望：

Question

我尝试使跨度适合另一个跨度，但是由于某种原因，它不起作用。

我已经尝试过Microphone monitoring和private String packageName; private String appName;。

String packageName;

for(ResolveInfo resolveInfo : resolveInfosAppDrawer){
        String packageName = resolveInfo.activityInfo.packageName;
        if(listHide.contains(new AppHide(resolveInfo.activityInfo.packageName))){
            Toast.makeText(context, "HIDE IT", Toast.LENGTH_SHORT).show();
        }else{

        }
        appDrawerList.add(new AppDrawer(resolveInfo.activityInfo.packageName, (String) resolveInfo.loadLabel(context.getPackageManager())));
    }

期望：

绿色背景的跨度内容应在浅灰色框中。

输出：

绿色背景的跨度内容不在任何框内。

Answer 1

您可以尝试添加float：left;吗？到#preview跨度和#cont跨度。向左浮动会迫使两个元素停留在左侧。

#preview, #cont{
  float:left;
}

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

Answer 2

您似乎正在尝试将#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/

上发表一篇精彩的文章

Answer 3

简短回答

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

https://jsfiddle.net/xypntkc0/

跨度不适合另一个跨度

期望：

输出：

3 个答案:

简短回答

更多详细信息

更多细节