在弹性项目之间显示div

Question

我正在创建一个填充了<div>元素的页面.包含这个div的容器有display: flex;.因此项目自动包装到几行.现在我想点击一个项目,这样就会打开另一个项目,其中<div>包含有关所选项目的信息.但是这个信息div应该位于包含所选div和容器全宽的行下面.

我不知道如何做这项工作.我做了一个简单的JsFiddle开头:https://jsfiddle.net/44j4jnq4/3/

我正在获得click事件和dynamiccaly添加带有Angular的dinfo div.我的问题主要是关于如何设置样式,以便它不会弄乱弹性项目并且具有容器的宽度.

我也有这个图像可视化我想要的东西.

希望你能帮助我.

Answer 1

我通过包裹.item内部a 稍微修改了html .item-container来实现所需的样式.

另外我使用的:after元素,以显示从该信息title的.infobox.

为了填充宽度,我添加了一个固定高度的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>