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的行为不像典型的内联块。

我想要实现的是使其外观如下（调整大小后，它们会跳到下一行）：

.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

您不只是删除弹性框并将所有中间容器设置为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>

Answer 2

在没有整个站点的情况下很难调试css问题，但是基于first fiddle you posted，将此css添加到css的底部，使它可以正常工作

.container{
  display: inline-block;
}
.innero1 {
  display: inline-block;
}

.innero1 div, .container div {
  float: left; 
  margin-right: .5em;
  display: inline-block;
}
.one { 
  float: left; 
  margin-right: .5em
}

如果那不能解决您的问题，请告诉我，我会看看是否能提供更多帮助。

编辑/更新：

确保在CSS中添加用注释突出显示的类。以下是代码段和here is a fiddle

var lst = $('<div class="stack" />');

$('.one, .inner2, .inner3, .two').each(function(i, v){
  $('<div />').html($(v).html()).appendTo(lst);
});

$('.innero1, .innero2').hide();

lst.appendTo($('.container'));

.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;
}


/* Add this class to your css */
.stack div {
  border: 2px solid black;
  display: inline-block;
  margin-right: .25em
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

据我所知，您没有使用flex-wrap: wrap属性。如果要使元素中断（例如典型的html / css），则需要告诉它包装。

这是一个超级基本的例子：

.container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start
}

.item {
  padding: 20px;
  margin: 10px;
  background: yellow;
  color: #000000;
  border: 1px solid #000000;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
</div>

我认为这可以回答您的问题...如果没有，请进一步说明。您应该不需要JavaScript即可完成您的要求。

HTML

3 个答案: