我目前正在使用susy创建我的个人网站,目前正在快速制作原型(www.dev.jaylaiche.com)。我正在尝试通过以下CSS使用span mixin来对齐我的内容(页面底部的lorem ipsum和其右侧的文本):
.home-page {
@include container(100%);
height: 100%;
min-height: 1020px;
nav {
ul {
@include horizontal-list();
li {
@include box-sizing(border-box);
width: 20%;
padding: 2%;
text-align: center;
}
}
}
.about-me {
width: inherit;
height: auto;
.about-text {
@include span(5);
}
.about-pic {
@include span(3 at 9 of 12);
}
}
}
所以,这应该将.about-pic div浮动到右边,对吗?我希望它从第9列移至第12列位置。但是,当我输入代码时,它只会继续将所有内容向左浮动。前几天,我在另一个项目上使用了它,它似乎运行良好。我在这里做错了什么?
如果需要,标记如下所示:
<div class="home-page">
<nav>
<ul>
<li class="navi home-nav"><a href="#">HOME</a></li>
<li class="navi work-nav"><a href="#">WORK</a></li>
<li class="navi logo-nav"><a href="#">Placeholder</a></li>
<li class="navi blog-nav"><a href="#">BLOG</a></li>
<li class="navi cont-nav"><a href="#">CONTACT</a></li>
</ul>
</nav>
<div class="about-me">
<div class="about-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iure quasi veritatis? Natus pariatur molestias modi laborum sed numquam, architecto nemo. Nobis id itaque nostrum, aliquam repellendus qui voluptatem? Soluta.
</div>
<div class="about-pic">Pic goes here</div>
</div>
3 at 9
将覆盖第9、10和11列-但是,如果您未使用隔离,它将向左浮动。last
在这种情况下最容易使用:span(last 3)
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句