那些遇到过的问题

相关疑难解决方法(0)

Flexbox:水平和垂直居中

如何使用flexbox在容器中水平和垂直居中div.在下面的例子中,我希望每个数字彼此相同(在行中),它​​们是水平居中的.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

http://codepen.io/anon/pen/zLxBo

html css html5 css3 flexbox

bsr*_*bsr
2016 10-23
588
推荐指数
9
解决办法
90万
查看次数

如何在另一个div内对齐3个div(左/中/右)？

我希望在容器div中对齐3个div,如下所示:

[[LEFT]       [CENTER]        [RIGHT]]
Run Code Online (Sandbox Code Playgroud)

容器div是100%宽(没有设置宽度),并且在调整容器大小后中心div应保持在中心.

所以我设置:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
Run Code Online (Sandbox Code Playgroud)

但它变成了:

[[LEFT]       [CENTER]              ]
                              [RIGHT]
Run Code Online (Sandbox Code Playgroud)

有小费吗？

html css alignment css-float flexbox

ser*_*erg
2017 12-19
375
推荐指数
7
解决办法
76万
查看次数

为什么弹性项目不会缩小内容大小？

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？

我不能用overflow-x: hidden.

的jsfiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div> …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

tom*_*657
2019 02-26
247
推荐指数
2
解决办法
4万
查看次数

CSS flexbox无法在IE10中运行

在IE10中,此代码无法正常工作:

.flexbox form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex: auto 1;
    -moz-flex: auto 1;
    -ms-flex: auto 1;
    -o-flex: auto 1;
    flex: auto 1;
}
Run Code Online (Sandbox Code Playgroud)

应该发生的是,input[type=submit]应该是31px宽,input[type=text]占用其余的可用空间form.input[type=text]由于某种原因,发生的事情是默认为263px.

这在Chrome和Firefox中运行良好.

css internet-explorer flexbox

Jac*_*Dev
2016 02-24
46
推荐指数
3
解决办法
13万
查看次数

Flex自动边距在IE10/11中不起作用

我有一个复杂的布局,我用Flexbox垂直和水平地对齐各种元素.

然后最后一个元素margin-right:auto;应用于向左推动元素(并否定它们的居中).

这在除了IE10/11之外的任何地方都能正常工作并且让我发疯.

HTML/CSS示例:

#container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -ms-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

#second-item {
  margin-right: auto;
}

/* just some colors - not important */
#container {
  height: 200px;
  width: 100%;
  background: red;
}
#container > div {
  background: blue;
  padding: 10px;
  outline: 1px solid yellow;
}
Run Code Online (Sandbox Code Playgroud) 
<div id='container'>
  <div …
Run Code Online (Sandbox Code Playgroud)

css internet-explorer flexbox internet-explorer-10 internet-explorer-11

Mic*_*ael
2018 01-27
33
推荐指数
1
解决办法
4万
查看次数

flex属性在IE中不起作用

我一直无法确定为什么flexbox在IE 11中不起作用.

为了测试,我从CodePen中获取了一个非常简单的flexbox布局,并粘贴了以下信息.

Chrome按预期工作; IE11失败了.

在Chrome上运行的布局成功图像:

在此输入图像描述

IE11上布局失败的图像

在此输入图像描述

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
Run Code Online (Sandbox Code Playgroud) 
<ul class="flex">
  <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>
</ul>
Run Code Online (Sandbox Code Playgroud)

http://codepen.io/hankthewhale/pen/IdKkB?editors=110

html css css3 flexbox internet-explorer-11

Diz*_*izz
2017 09-23
20
推荐指数
2
解决办法
2万
查看次数

如何通过CSS创建3x3网格？

div一个接一个给出9 秒,我想通过CSS创建一个3X3网格.

我怎么做？

.cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

/* this doesn't work; at least not in safari */
.cell:nth-child(3n)::after {
  display: block;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

注意:我不想要float/clear解决方案.重点是CSS,而不是HTML重组.

如果我添加content: '\A'; white-space: pre; …

html css css3 flexbox

作者
2016 05-29
18
推荐指数
3
解决办法
2万
查看次数

使div扩展以占用父容器的可用高度

我有这个代码:

HTML:

<div class="tile">
    <h3>short</h3>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div class="tile">
    <h3>longLongLong longLongLong …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

bra*_*r19
2016 03-20
15
推荐指数
4
解决办法
857
查看次数

Flexbox无法在iPad和Safari上运行

我在网站上使用flexbox,它在iPad Air,iPad 3和Safari PC上崩溃.

设计和代码类似于这个codepen. http://codepen.io/anon/pen/xwJzEg/

display: flex;
flex-wrap: wrap;
Run Code Online (Sandbox Code Playgroud)

这就是它出现问题的设备的外观:在此输入图像描述

任何建议如何解决这个问题？

html css css3 flexbox

Chr*_*iss
2016 04-04
13
推荐指数
2
解决办法
6万
查看次数

在div中垂直居中两个元素

我试图垂直居中两个<p>元素.

我按照phrogz.net上的教程进行了操作,但仍然将元素放在div上方,在div下面,在div中顶部对齐.

我会尝试其他的东西,但这里的大多数问题只是回到那个教程.

此代码段用于网页顶部的横幅广告.

.banner {
  width: 980px;
  height: 69px;
  background-image: url(../images/nav-bg.jpg);
  background-repeat: no-repeat;
  /* color: #ffffff; */
}

.bannerleft {
  float: left;
  width: 420px;
  text-align: right;
  height: 652px;
  line-height: 52px;
  font-size: 28px;
  padding-right: 5px;
}

.bannerright {
  float: right;
  width: 555px;
  text-align: left;
  position: relative;
}

.bannerrightinner {
  position: absolute;
  top: 50%;
  height: 52px;
  margin-top: -26px;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="banner">
  <div class="bannerleft">
    I am vertically centered
  </div>
  <div class="bannerright">
    <div class="bannerrightinner">
      <p>I should be</p> …
Run Code Online (Sandbox Code Playgroud)

html css css3 centering flexbox

Rom*_*oux
2017 04-23
12
推荐指数
2
解决办法
5万
查看次数

标签 统计

css ×10

flexbox ×10

html ×8

css3 ×7

internet-explorer ×2

internet-explorer-11 ×2

alignment ×1

centering ×1

css-float ×1

html5 ×1

internet-explorer-10 ×1