相关疑难解决方法(0)
如何水平居中<div>？
如何使用CSS <div>在另一个内部水平居中<div>？
<div id="outer">
<div id="inner">Foo foo</div>
</div>
4116
推荐指数
推荐指数
55
解决办法
解决办法
386万
查看次数
查看次数
Flexbox和Internet Explorer 11(显示:flex in <html>？)
我打算放弃"浮动"布局,并将css flexbox用于未来的项目.我很高兴看到他们当前版本中的所有主流浏览器似乎都支持(以这种或那种方式)flexbox.
我前往"由Flexbox解决" http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/来查看一些示例.然而,"粘性页脚"示例似乎在IE11中不起作用.我打了一下周围,并得到它通过增加工作display:flex的<html>和width:100%在<body>
所以我的第一个问题是:有人可以向我解释这个逻辑吗？我只是摆弄它并且它工作,但我不太明白为什么它的工作方式...
然后有"媒体对象"示例适用于所有浏览器,除了 - 你猜对了 - IE.我也在摆弄它,但没有成功.
因此,我的第二个问题是:在IE中使用"媒体对象"示例是否有"干净"的可能性？
106
推荐指数
推荐指数
3
解决办法
解决办法
22万
查看次数
查看次数
Flexbox代码适用于除Safari之外的所有浏览器.为什么？
带有列表标签的网格列,我需要每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浏览器工作,我似乎无法解决这个问题,我会适当的任何帮助:)
测试链接:
65
推荐指数
推荐指数
2
解决办法
解决办法
7万
查看次数
查看次数
Flexbox无法在Internet Explorer 11中运行
这段代码在Firefox,Chrome和Edge中运行良好,但由于flex模型,它在IE11中无法正常工作.我该如何解决？
这就是它在Firefox中的样子
这就是它在IE11中的外观
body * {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-flow: column;
margin: 0;
}
main {
flex: 1;
display: flex;
}
header,
footer {
background: #7092BF;
border: solid;
width: 100%;
}
section {
border: solid;
background: #9AD9EA;
flex: 1
}
aside {
border: solid;
width: 150px;
background: #3E48CC
}<header>
<p>header
</header>
<main>
<aside>
<p>aside
<p>aside
</aside>
<section>
<p>content
<p>content
<p>content
<p>content
</section>
</main>
<footer>
<p>footer
<p>footer
</footer>26
推荐指数
推荐指数
3
解决办法
解决办法
9万
查看次数
查看次数
如何垂直居中文字？
我一直在努力让我的内容div中的文本垂直居中,我很难过.容器包括1个带标题的div和带有内容的1 div.
我尝试过如下元素:
vertical-align: middle;
并且还玩显示器/定位,但我没有运气.
目前的CSS如下:
.content-wrapper {
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: left;
text-align: left;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
color: #000;
font-family: Montserrat;
text-transform: none;
-webkit-transform: translateY(40vh);
transform: translateY(40vh);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
padding-top: 10%;
padding-right: 25px;
padding-left: 30px;
float: right;
width: 35%;
background-color: #f0f7fc;
}
8
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数