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与500px一起成为display: block。我否则要public static final String WORKSPACE_DIR = System.getProperty("java.io.tmpdir") + "scm4j-vcs-workspaces"; // or provide network shared folder path public static void main(String[] args) { IVCSWorkspace workspace = new VCSWorkspace(WORKSPACE_DIR); String repoUrl = "https://github.com/scm4j/scm4j-vcs-api"; IVCSRepositoryWorkspace repoWorkspace = workspace.getVCSRepositoryWorkspace(repoUrl); try (IVCSLockedWorkingCopy wc = repoWorkspace.getVCSLockedWorkingCopy()) { // wc.getFolder() is locked folder where you can do any checkouts. Another microservices can not use this folder } // here folder is unlocked and can be reused if the same repository url is provided。

我正在寻找一个纯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>

CSS：根据文字宽度显示内联或阻止-无JavaScript

1 个答案: