html – 使兄弟元素采用相同的宽度打破其中的文本

发布时间：2020-12-14 23:35:55 所属栏目：资源来源：网络整理

导读：我试图设置div的宽度,它的内容是段落user-title的宽度.这是 HTML和CSS： .panel { margin-bottom: 20px; width: auto; display: inline-flex; flex-direction: column; box-shadow: 0 2px 4px 0 #C6C2BF; padding: 0.5rem 1rem 1rem;}.user-title { display:

我试图设置div的宽度,它的内容是段落user-title的宽度.这是 HTML和CSS：

.panel {
  margin-bottom: 20px;
  width: auto;
  display: inline-flex;
  flex-direction: column;
  box-shadow: 0 2px 4px 0 #C6C2BF;
  padding: 0.5rem 1rem 1rem;
}

.user-title {
  display: flex;
}

.panel>div {
  display: flex;
  flex-direction: column;
}

.panel>div>p {
  display: flex;
  flex-grow: 1;
  width: 0;
}

<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>
</div>

这种设置使元素占用用户标题元素的宽度,但是,文本分成多行.我怎样才能解决这个问题？
这是fiddle.

解决方法

如果我在这里没有完全弄错,那么使用CSS跨浏览器进行工作的唯一方法是将display：inline-block与display：table-row / display：table-caption结合起来.

堆栈代码段

.panel {
  margin-bottom: 20px;
  display: inline-block;
  box-shadow: 0 2px 4px 0 #C6C2BF;
  padding: 0.5rem 1rem 1rem;
}

.user-title {
  display: table-row;
}

.panel > div {
  display: table-caption;
  caption-side: bottom;
}

<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>
</div>

如果你不关心IE,那么使用width：0;最小宽度：100％;在.parent div.

注意,我在Edge v.16,Firefox v.58和Chrome v.64上成功测试了这一点,但是如果它适用于Safari我就不能说了.

堆栈代码段

.panel {
    margin-bottom: 20px;
    display: inline-flex;
    flex-direction: column;
    box-shadow: 0 2px 4px 0 #C6C2BF;
    padding: 0.5rem 1rem 1rem;
}

.panel > div {
  width: 0;
  min-width: 100%;
}

<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>
</div>

更新

经过一些反复试验,我在IE11和Edge / Firefox / Chrome上都有这个功能

堆栈代码段

.panel {
    margin-bottom: 20px;
    display: inline-flex;
    flex-direction: column;
    box-shadow: 0 2px 4px 0 #C6C2BF;
    padding: 0.5rem 1rem 1rem;
}

.panel > div {
  width: 0;
  min-width: 100%;
  display: flex;           /*  for IE11  */
  flex-wrap: wrap;         /*  for IE11  */
}

.panel > div > p {
  flex: 100%;              /*  for IE11  */
}

<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>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!