在弹性项目之间显示 div

Question

我正在创建一个包含 <div> 元素的页面。包含此 div 的容器有 display: flex;。所以项目自动换行到几行。现在我想单击一个项目，这样它会打开另一个 <div>，其中包含有关所选项目的信息。但是此信息 div 应位于包含所选 div 且具有容器全宽的行下方。

我不知道该怎么做。我做了一个简单的 JsFiddle 作为开始：https://jsfiddle.net/44j4jnq4/3/

我正在获取点击事件并动态添加 dinfo div 和 Angular。我的问题主要是关于如何设计它的样式，这样它就不会与 flex 项目混淆并且具有容器的宽度。

我也有这张图片来形象化我要做什么。

希望你能帮助我。

Answer 1

我通过将 .item 包裹在 .item-container 中来稍微修改 html 以获得所需的样式。

我还使用 :after 元素来显示来自 .infobox 的 title 的信息。

为了填充宽度，我添加了一个具有固定高度的 div 和一个绝对定位的 :after，它引用 .container 以占据全宽，点击.item要查看信息，请查看此内容。

$('.container').click(function(e){
 if(!$(e.target).next().hasClass('show')){
   $('.item-container .show').removeClass('show');
   $(e.target).next().addClass('show');
  }
})

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: grey;
  position: relative;
}
.item {
  width: 300px;
  height: 150px;
  background-color: pink;
  margin: 0px 5px 10px 5px;
}

.infobox {
  height: 110px;
  display: none;
}
.infobox.show{
  display: block;
}
.infobox.show:after{
    content: attr(title);
    display: block;
    height: 100px;
    background: #FFF;
    width: calc(100% - 20px);
    position: absolute;
    overflow-y: scroll;
    left: 0;
    margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="container">
    <div class="item-container"> 
      <div class="item">Item 1</div><div class="infobox" title="Item 1 info"></div>
    </div>
    <div class="item-container">
      <div class="item">Item 2</div><div class="infobox" title="Item 2 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 3</div><div class="infobox" title="Item 3 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 4</div><div class="infobox" title="Item 4 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 5</div><div class="infobox" title="Item 5 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 6</div><div class="infobox" title="Item 6 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 7</div><div class="infobox" title="Item 7 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 8</div><div class="infobox" title="Item 8 info"></div>
    </div>
</div>

不使用 :after 元素，试试这个

$('.container').click(function(e){
 if(!$(e.target).next().hasClass('show')){
   $('.item-container .show').removeClass('show');
   $(e.target).next().addClass('show');
   $(e.target).next().html('<div class="content"><h4>'+$(e.target).next().attr('title')+'</h4><img style="width:50px" src="https://olinuris.library.cornell.edu/sites/default/files/equipment/Draper%2050x50%20Template_1.jpg" /><button>Press</button></div>')
  }
})

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: grey;
  position: relative;
}
.item {
  width: 300px;
  height: 150px;
  background-color: pink;
  margin: 0px 5px 10px 5px;
}

.infobox {
  height: 160px;
  display: none;
}
.infobox.show{
  display: block;
}
.infobox .content{
    height: 150px;
    background: #FFF;
    width: calc(100% - 20px);
    overflow-y: scroll;
    position: absolute;
    left: 0;
    margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
    <div class="item-container"> 
      <div class="item">Item 1</div><div class="infobox" title="Item 1 info"></div>
    </div>
    <div class="item-container">
      <div class="item">Item 2</div><div class="infobox" title="Item 2 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 3</div>
      <div class="infobox" title="Item 3 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 4</div><div class="infobox" title="Item 4 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 5</div><div class="infobox" title="Item 5 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 6</div><div class="infobox" title="Item 6 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 7</div><div class="infobox" title="Item 7 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 8</div><div class="infobox" title="Item 8 info"></div>
    </div>
</div>

在弹性项目之间显示 div

Show a div in between flex items

angular

css

flexbox

css-grid