javascript - HTML 中的行内 block 元素

Question

我的 HTML 代码如下所示，我无法编辑它:

.container {
  background-color: red;
  display: flex;
}

.container {
  background-color: red;
}

.innero1 {
  display: flex;
}

.one,
.two,
.inner2,
.inner3 {
  border: 2px solid black;
  display: inline-block;
}

.two {
  list-style-type: none;
}

.inner2,
.inner3 {
  margin-left: 3px;
  height: max-content;
}

ul {
  margin: 0;
  padding-left: 3px;
}

<div class="container">
  <div class="innero1">
    <div class="inner1">
      <div class="one">Text1</div>
      <div class="one">Text2</div>
      <div class="one">Text3</div>
      <div class="one">Text4</div>
    </div>
    <div class="inner2">Text5</div>
    <div class="inner3">Text6</div>
  </div>
  <div class="innero2">
    <div class="four">
      <ul>
        <li class="two">Text7</li>
        <li class="two">Text8</li>
      </ul>
    </div>
  </div>
</div>

如您所见，div 的行为与典型的内联 block 不同。

我想要实现的是让它看起来像这样(调整大小时它们会跳到下一行):

.one {
  border: 2px solid black;
  display: inline-block;
}

<div class="container">
  <div class="one">Text1</div>
  <div class="one">Text2</div>
  <div class="one">Text3</div>
  <div class="one">Text4</div>
  <div class="one">Text5</div>
  <div class="one">Text6</div>
  <div class="one">Text7</div>
  <div class="one">Text8</div>
</div>

我正在考虑使用 jQuery detach，但我认为这不是个好主意...

编辑:我不想更改我的 html。最终效果应该像第二个片段一样工作，但看起来不像(代码)...

Answer 1

难道你不只是删除 flexboxes 并将所有中间容器设置为 display:inline 吗？像这样。

.container {
  background-color: red;
  display: block;
}

.container {
  background-color: red;
}

.inner1, .innero1, .innero2, .four {
  display: inline;
}

.one,
.two,
.inner2,
.inner3 {
  border: 2px solid black;
  display: inline-block;
}

.two {
  list-style-type: none;
}

ul {
  margin: 0;
  padding-left: 0px;
  display:inline;
}

<div class="container">
  <div class="innero1">
    <div class="inner1">
      <div class="one">Text1</div>
      <div class="one">Text2</div>
      <div class="one">Text3</div>
      <div class="one">Text4</div>
    </div>
    <div class="inner2">Text5</div>
    <div class="inner3">Text6</div>
  </div>
  <div class="innero2">
    <div class="four">
      <ul>
        <li class="two">Text7</li>
        <li class="two">Text8</li>
      </ul>
    </div>
  </div>
</div>