在弹性项目之间显示div

Question

我正在创建一个填充了<div>元素的页面。包含这个div的容器有display: flex;。所以这些项目自动换行为几行。现在我想点击一个项目，以便打开另一个<div>，其中包含关于所选项目的信息。但是这个信息div应该在包含所选div的行的下面，并且包含容器的全部宽度。

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

我得到click事件和dynamiccaly添加dinfo div与Angular。 我的问题主要是关于如何设计它的样式，所以它不会混淆flex项目并且有宽度的容器。

我也有这个形象来想像我要去的。

希望你能帮助我。

Answer 1

我稍微修改了html，将.item包裹在.item-container的内部以实现所需的样式。

此外，我正在使用:after元素来显示title的.infobox的信息。

为了填补我添加了具有固定高度的div和绝对定位的:after这是为了充分宽，点击.item看到信息参考.container，请检查了这一点的宽度。

$('.container').click(function(e){ 
 
\t 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){ 
 
\t 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>