Question

假设外盒内有5-20个内盒，宽度为300-500像素。

<outer>
<inner>Number 1</inner>
<inner>Number 2</inner>
<inner>Number 3</inner>
<inner>Number 4</inner>
<inner>Number 5</inner>
<inner>Number 6</inner>
...
</outer>

根据外部宽度，它们最终可能会显示如下：

Number 1  Number 2
Number 3  Number 4
Number 5  Number 6

或者这个：

Number 1  Number 2  Number 3
Number 4  Number 5  Number 6

现在，当你点击一个内盒（例如＃2）时，你想要在点击框下面显示一个新框：

Number 1  Number 2
+----------------+
|                |
| Hello Number 2 |
|                |
+----------------+
Number 3  Number 4
Number 5  Number 6

或者如果宽度较大，它将如下所示：

Number 1  Number 2  Number 3
+--------------------------+
|                          |
|      Hello Number 2      |
|                          |
+--------------------------+
Number 4  Number 5  Number 6

我的问题是，为了能够轻松地将新盒子插入标记中的正确位置，布置内盒的最佳方法是什么？

a）只需漂浮内盒即可。好：浏览器处理定位。错误：当您的代码不知道内盒的位置时，如何确定插入新盒子的位置？

b）让您的代码根据可用宽度在列和行中定位框。好：很容易将新盒子插入正确的位置。 问题：通过响应性创建挑战。

Example: See how album details are revealed in iTunes when clicking an album thumbnail

Answer 1

我希望我的问题是正确的，你需要在需要时更改css，例如添加一个具有float：none和clear的类：两者都是条件（如点击发生。

我在小提琴上做了一个例子：https://jsfiddle.net/ejeqs8m7/2/ 只需点击任何一个div。

它切换了一个看起来像这样的类.click：

.clicked {
  float:none;
  clear:both;
  width:auto;
}

Answer 2

您可以检查元素是否在同一水平线上，并使用JavaScript动态添加viewer元素。

var idles = document.querySelectorAll('.idle');
Array.prototype.forEach.call(idles, function(idle) {
  idle.addEventListener('click', showInfo);
});

function showInfo(e) {
  var selectedTabClass = 'active';
  var viewerClass = 'viewer';
  if (showInfo.prevClickElement && showInfo.prevClickElement !== this) {
    showInfo.prevClickElement.classList.remove(selectedTabClass);
  }
  if (this.classList.contains(selectedTabClass)) {
    // remove viewer element
    showInfo.viewer.parentElement.removeChild(showInfo.viewer);
    this.classList.remove(selectedTabClass);
    return;
  }
  if (!showInfo.viewer) {
    // Create a viewer element only if it wasn't created before
    showInfo.viewer = document.createElement('div');
    showInfo.viewer.classList.add(viewerClass);
  }

  if (!showInfo.section) {
    // Get the parent container
    showInfo.section = document.querySelector('section');
  }
  var after = this;
  // Getting the next element which isn't in the exact horizontal line with the clicked element
  while (after && after.offsetTop === this.offsetTop) {
    after = after.nextElementSibling;
  }

  // Add the content through the below line
  showInfo.viewer.innerHTML = this.innerHTML + " Viewer";
  if (after) {
    showInfo.section.insertBefore(showInfo.viewer, after);
  } else {
    // if after element isn't present then safely assuming that the clicked element was in the last horizontal line and appending the viewer element
    showInfo.section.appendChild(showInfo.viewer);
  }
  this.classList.add(selectedTabClass);
  showInfo.prevClickElement = this;
}

section {
  width: 200px;
}
.idle {
  background-color: green;
  float: left;
  width: 100px;
}
.clicked {
  background-color: yellow;
  float: none;
  clear: both;
  width: auto;
}
.viewer {
  clear: both;
}

<section>
  <div class="idle">Div #1</div>
  <div class="idle">Div #2</div>
  <div class="idle">Div #3</div>
  <div class="idle">Div #4</div>
  <div class="idle">Div #5</div>
  <div class="idle">Div #6</div>
  <div class="idle">Div #7</div>
  <div class="idle">Div #8</div>
</section>

如何在浮动div的列表下面插入div

2 个答案: