我需要制作一个项目，列出2个版本（或1，需要响应（大屏幕，移动））的人（名称和详细信息）。总是以同样的方式，点击名称，它会显示一个带有详细信息的手风琴。
我在这里不好。 我开始使用移动部件，然后转到去掉一个。移动设备上的详细信息需要在名称（可能在2个名称之间）和左侧的一个桌面之下。
这是我到目前为止所做的一个小提琴。但是你可以很容易地看到，在桌面屏幕上，细节模式只是破坏了一些东西，因为左边的列表就在了。
https://jsfiddle.net/4h54hm2y/
function contentToggle()
{
$('#accordion').find('.accordion-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');
});
}
// when document loaded
$(document).ready(function(){
// load toggle event
contentToggle();
});body {
font-family: "Times New Roman", Georgia, Serif;
}
.container h1 {
text-align: center;
}
.img-container {
float: left;
box-shadow: 1px 1px 12px #555;
height: 100px;
width: 100px;
margin: 0 10 10 0;
padding: 2px;
}
.profil-title {
background-color: #CCC;
height: 20px;
padding: 3px;
border: 1px solid gray;
}
.profil-picture {
width: 100%;
height: 100%;
}
.profil-link {
color: black;
margin: 5px;
}
.profil-details {
display: none;
}
.name-container p{
font-weight: bold;
}
@media screen and (min-width: 600px) {
.profil-container {
margin-left: 75px;
}
.profil-title {
width: 150px;
display: inline-block;
}
.profil-details {
display: none;
margin-left: 180px;
margin-top: -28px;
}
.list-last {
border-bottom-left-radius:10px;
}
.list-first {
border-top-left-radius:10px;
}
.name-container {
width: 100px;
display: inline-block;
}
.name-container p {
font-weight: bold;
margin: 0 0 5 0;
}
.img-container {
float: left;
box-shadow: 1px 1px 12px #555;
height: 100px;
width: 100px;
margin: 0 10 5 0;
padding: 2px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container" id="accordion">
<h1>Profil browser</h1>
<div class="profil-container">
<div class="profil-title accordion-toggle list-first">
<a class="profil-link" href="#">name</a>
</div>
<div class="profil-details accordion-content">
<div class="name-container">
<p>personn</p>
</div>
<div class="img-container">
<img src="http://placehold.it/350x150" class="profil-picture">
</div>
<div class="profil-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat ut nisi non consequat. Nulla consequat mauris id ullamcorper iaculis. Curabitur dapibus enim libero, vel tristique nisl eleifend quis. Donec egestas sem a lacinia facilisis. Etiam quis velit id lorem ornare finibus ac non leo. Donec ultricies consectetur libero, vel ultrices metus porta quis. Donec sagittis lectus enim, non elementum lacus vestibulum sed. Ut semper odio non varius vehicula. Cras vitae semper ligula. Fusce mi arcu, congue quis metus nec, euismod gravida erat.
<br/><br/>
Donec interdum diam ac ipsum facilisis, sed scelerisque turpis pulvinar. In justo dolor, lobortis et ultrices non, scelerisque quis velit. Cras erat mauris, blandit eget nisi id, ornare auctor nunc. In suscipit magna efficitur venenatis tempus. Suspendisse potenti. Nulla sit amet pulvinar est, non interdum nisl. In id rutrum est. Morbi viverra, nisi sit amet congue eleifend, ante lectus pulvinar nunc, id facilisis tortor eros id lacus. Praesent pretium venenatis fringilla. Suspendisse hendrerit laoreet lobortis. Ut feugiat, lorem id laoreet volutpat, leo magna iaculis urna, a imperdiet odio eros in ex.
<br/><br/>
Integer pretium orci vitae sapien blandit, a mollis dolor viverra. Nam dapibus, orci in viverra bibendum, dolor ex eleifend nisi, a condimentum dui tortor nec purus. In eleifend pellentesque bibendum. Fusce ut lacus eget velit auctor sagittis sit amet sit amet metus. Ut ultrices ac nibh in venenatis. Praesent finibus tellus ut viverra viverra. Praesent sodales velit sed tellus bibendum scelerisque.
</div>
</div>
</div>
<div class="profil-container">
<div class="profil-title accordion-toggle">
<a class="profil-link" href="#">name 2</a>
</div>
<div class="profil-details accordion-content">
<div class="name-container">
<p>personn 2</p>
</div>
<div class="img-container">
<img src="http://placehold.it/350x150" class="profil-picture">
</div>
<div class="profil-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat ut nisi non consequat. Nulla consequat mauris id ullamcorper iaculis. Curabitur dapibus enim libero, vel tristique nisl eleifend quis. Donec egestas sem a lacinia facilisis. Etiam quis velit id lorem ornare finibus ac non leo. Donec ultricies consectetur libero, vel ultrices metus porta quis. Donec sagittis lectus enim, non elementum lacus vestibulum sed. Ut semper odio non varius vehicula. Cras vitae semper ligula. Fusce mi arcu, congue quis metus nec, euismod gravida erat.
<br/><br/>
Donec interdum diam ac ipsum facilisis, sed scelerisque turpis pulvinar. In justo dolor, lobortis et ultrices non, scelerisque quis velit. Cras erat mauris, blandit eget nisi id, ornare auctor nunc. In suscipit magna efficitur venenatis tempus. Suspendisse potenti. Nulla sit amet pulvinar est, non interdum nisl. In id rutrum est. Morbi viverra, nisi sit amet congue eleifend, ante lectus pulvinar nunc, id facilisis tortor eros id lacus. Praesent pretium venenatis fringilla. Suspendisse hendrerit laoreet lobortis. Ut feugiat, lorem id laoreet volutpat, leo magna iaculis urna, a imperdiet odio eros in ex.
<br/><br/>
Integer pretium orci vitae sapien blandit, a mollis dolor viverra. Nam dapibus, orci in viverra bibendum, dolor ex eleifend nisi, a condimentum dui tortor nec purus. In eleifend pellentesque bibendum. Fusce ut lacus eget velit auctor sagittis sit amet sit amet metus. Ut ultrices ac nibh in venenatis. Praesent finibus tellus ut viverra viverra. Praesent sodales velit sed tellus bibendum scelerisque.
</div>
</div>
</div>
<div class="profil-container">
<div class="profil-title accordion-toggle list-last">
<a class="profil-link" href="#">name 3</a>
</div>
<div class="profil-details accordion-content">
<div class="name-container">
<p>personn 3</p>
</div>
<div class="img-container">
<img src="http://placehold.it/350x150" class="profil-picture">
</div>
<div class="profil-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat ut nisi non consequat. Nulla consequat mauris id ullamcorper iaculis. Curabitur dapibus enim libero, vel tristique nisl eleifend quis. Donec egestas sem a lacinia facilisis. Etiam quis velit id lorem ornare finibus ac non leo. Donec ultricies consectetur libero, vel ultrices metus porta quis. Donec sagittis lectus enim, non elementum lacus vestibulum sed. Ut semper odio non varius vehicula. Cras vitae semper ligula. Fusce mi arcu, congue quis metus nec, euismod gravida erat.
<br/><br/>
Donec interdum diam ac ipsum facilisis, sed scelerisque turpis pulvinar. In justo dolor, lobortis et ultrices non, scelerisque quis velit. Cras erat mauris, blandit eget nisi id, ornare auctor nunc. In suscipit magna efficitur venenatis tempus. Suspendisse potenti. Nulla sit amet pulvinar est, non interdum nisl. In id rutrum est. Morbi viverra, nisi sit amet congue eleifend, ante lectus pulvinar nunc, id facilisis tortor eros id lacus. Praesent pretium venenatis fringilla. Suspendisse hendrerit laoreet lobortis. Ut feugiat, lorem id laoreet volutpat, leo magna iaculis urna, a imperdiet odio eros in ex.
<br/><br/>
Integer pretium orci vitae sapien blandit, a mollis dolor viverra. Nam dapibus, orci in viverra bibendum, dolor ex eleifend nisi, a condimentum dui tortor nec purus. In eleifend pellentesque bibendum. Fusce ut lacus eget velit auctor sagittis sit amet sit amet metus. Ut ultrices ac nibh in venenatis. Praesent finibus tellus ut viverra viverra. Praesent sodales velit sed tellus bibendum scelerisque.
</div>
</div>
</div>
</div>
</body>
另外，在大屏幕上，我试图获得一种边界，就像那样。
我想在php中包含东西，或者使用JQuery来创建一个html部分，但它似乎过度反应了，我认为它可能在CSS中完成。事实是，我不好，只是在这里问一些帮助或建议。
最终目标是做类似的事情。 finalview
答案 0 :(得分：0)
加入@media定义，添加
@media screen and (min-width: 600px) {
.accordion-content {
border: 2px solid black;
position: absolute; left: 60px;
}
...
JSfiddle：https://jsfiddle.net/uf12wozx/
修改以更好地控制将内容部分（h1下方）包装到另一个div中所需的详细信息，并将该div设置为position: relativ基础。
然后，您可以使用div更好地定位每个详情视图position: absolute; top: 0;。
请参阅此plunker：https://jsfiddle.net/wLb1Lmg1/
答案 1 :(得分：0)
使用类
在您的个人资料周围添加div
HTML
<div class="all-profiles">
... <!-- profile containers -->
</div>
如小提琴中所示切换css