带有列表标签的网格列,我需要每3列以正确的顺序显示,并为每个额外的HTML列表元素启用自动宽度.
这是我的例子:
<style>
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 150px;
width:auto;
}
li {
float: left;
display: inline-block;
list-style: none;
position: relative;
height: 50px;
width: 50px;
}
</style><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>display: -webkit-flex;.
我想像这样转换输出:
1 4 7 10
2 5 8 11
3 6 9 12
重要的是我到目前为止我的Safari浏览器工作,我似乎无法解决这个问题,我会适当的任何帮助:)
测试链接:
我有一个HTML页面,其中包含固定高度的页眉和页脚以及介于两者之间的元素.
我希望元素始终具有屏幕的总高度(不包括页眉和页脚).例如,假设屏幕的总高度为1000px,每个页眉/页脚的固定高度为60px - > div元素高度应为880px.现在,我面临的挑战是使其响应(无论屏幕大小是什么,行为应该如所描述的那样)而不使用JavaScript/JQuery.仅限CSS.
我开始使用"身高:100%",但不知道如何继续......
<html>
<head></head>
<body>
<header class="header">my header</header>
<div class="content">content</div>
<footer class="footer">my footer</footer>
</body>
</html>
http://codepen.io/anon/pen/QbGZgL
注意:IE 10也应该受到支持......
我考虑过flexbox,但不明白我是如何根据自己的需要使用它的.假设我在页面内容中有一些文本和一些图像.我不希望在屏幕较小时出现垂直滚动条,我希望整个内容缩小,以便填充可用高度.
CSS3视口单元:vh/vw/vmin/vmax可以帮助我吗？
我试图在我的网站中实现灵活的盒子模型,虽然它的工作为-webkit浏览器,如chrome和safari,其他浏览器,如mozilla和opera,我似乎无法让它在Internet Explorer中工作,无论我是什么做.下面是我的Css样式表文件的简短片段,其中包含我的.holder类,其中包含所有内容,而我的#new_div id是.holder的子项,并且包含我的帖子和侧边栏的主要部分.
.holder
{
width:100%;
margin:auto;
display:-webkit-box;
display:-o-box;
display:-ms-box;
display:-box;
display:-pie;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
-box-orient:vertical;
-pie-box-orient:vertical;
-moz-box-flex:1; /* Firefox, seamonkey etc */
-o-box-flex:1; /* Opera */
-ms-box-flex:1; /* MSIE */
-box-flex:1; /* Any that support full implementation */
-pie-box-flex:1;
-webkit-box-flex:1;
-webkit-box-pack:center;
-o-box-pack:center;
-ms-box-pack:center;
-pie-box-pack:center;
-box-pack:center;
text-align:center;
behavior: url(../../Content/pie/PIE.htc);
}
.holder #new_div
{
width:940px;
}
.holder div
{
-webkit-box-pack:center;
-o-box-pack:center;
-ms-box-pack:center;
-box-pack:center;
-pie-box-pack:center;
behavior: url(../../Content/pie/PIE.htc);
}
#new_div
{
margin:auto;
display:-webkit-box;
display:-moz-box;
display:-o-box;
display:-ms-box;
display:-box;
display:-pie-box;
text-align:left;
-webkit-box-flex:1;
-moz-box-flex:1; /* …