我在为我的新网站设置布局时遇到了一些问题 - 它无论如何都不起作用。希望有人能帮助我!
我的意图是让父元素 (#projects) 居中,其宽度由其所有子元素 (.project) 的总和计算得出。
HTML
<ul id="projects">
<li class="project"></li>
<li class="project"></li>
<li class="project"></li>
<li class="project"></li>
<li class="project"></li>
<li class="clear"></li>
</ul>
CSS
* {
margin:0; padding:0; list-style:none;
text-decoration:none; border:0; outline:0; }
body {
background:#f5f5f3;
font-family:"Arial", sans-serif;
font-size:12px;
line-height:22px;
letter-spacing:1.5px;
font-weight:300;
color:#fefefe; }
.clear {
clear:both; }
#projects {
margin:auto; }
#projects .project {
height:100vh;
float:left; }
#projects .project:nth-child(1) {
background:#111; }
#projects .project:nth-child(2) {
background:#333; }
#projects .project:nth-child(3) {
background:#555; }
#projects .project:nth-child(4) {
background:#777; }
#projects .project:nth-child(5) {
background:#999; }
jQuery
$(document).ready(function() {
// .project Layout
$(window).on( "resize", function () {
$(".project").width( $(window).width() / 3 );
}).resize();
// #projects Layout
$(window).on("resize", function () {
var width = 0;
$('.project').each(function() {
width += $(this).outerWidth( true );
});
$('#projects').css('width', width);
}).resize();
});
最佳答案
你可以这样做:
#project {
width: 100%;
}
.project {
width: 33%;
}
关于jquery - 动态水平布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25413921/