Question

我想设置div的宽度，并将其内容设置为其中一个段落的宽度。这是html结构：

<div class="panel">
  <p class="user-title">Date 08.03.2018 User: Joe Doe</p>
  <div>
    <p>Some long text in the paragraph that is wider than the title above it</p>
    <p>Another shorter text</p>
</div>

目前我为.panel：

设置了这样的样式

.panel {
    width: 20rem;
    display: flex;
    flex-direction: column;
    flex: 0 1 270px;
}

我遇到的问题是带有班级.user-title的段落标签内的文字会突破到 Chrome 中的另一行， Edge ，而不会在 IE 中。我希望将文本保持在同一行，并且其他所有内容都采用该文本的宽度。

我尝试将.panel设置为：

width: auto;
height: auto;
display: inline-flex;
flex-direction: column;
flex: 0 1 auto;
position: relative;

孩子分到：

position: absolute;
width: 100%;
top: 30px;

然后，.panel和孩子div获取其中paragraph的宽度。但是，子元素在它的高度中脱离了面板元素的bounderis，面板不会覆盖段落和子div的高度。

这是fiddle。我该如何解决这个问题？

Answer 1

您可以使用display：table执行此操作，它将根据其内容获取面板的宽度。

ProgrammingError: function st_intersects(text, geometry) is not unique
LINE 1: ...NT(*) AS "__count" FROM "field" WHERE ST_Interse...```

CSS flexbox-制作一个div，它的内容高度和宽度不起作用

1 个答案: