html - CSS:根据文本宽度显示内联或 block - 无 javascript

Question

所以我有以下 DOM

  <div class="parent">
    <div class="first-child">Some Text</div>
    <div class="second-child">Some other text that can sometimes be very long, sometimes short</div>
  </div>

如果 .second-child 小于 ，我希望 display: inline 与 .first-child 500 像素。我想要它 display: block 否则。

我正在寻找一个纯 CSS 解决方案，没有 javascript。

Answer 1

你可以使用 flexbox 来模拟​​这样的行为:

.parent {
  display:flex;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.first-child {
  border:1px solid green;
  flex-basis:calc(100% - 500px); /*This will make the element to wrap when the second one is bigger than 500px*/
}
.second-child {
   border:1px solid red;
}

* {
  box-sizing:border-box;
}

<div class="parent">
    <div class="first-child">Some Text</div>
    <div class="second-child">shot text (less than 500px)</div>
  </div>

  <div class="parent">
    <div class="first-child">Some Text</div>
    <div class="second-child">medium text but still shorter to not wrap (less than 500px)</div>
  </div>

  <div class="parent">
    <div class="first-child">Some Text</div>
    <div class="second-child">very long text  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sagittis orci nec accumsan. Phasellus quis dui eu dolor pellentesqu (bigger than 500px)</div>
  </div>