Question

我正在Udacity学习HTML / CSS。我试图将第一行项col-2和col-10放在彼此相邻的行中，但display: flex;不起作用。有什么指示吗？

＆＃13;

*{
	border: red solid 1px; !important
}

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

*{
	text-align: center;
}


}
.row {
	width : 100%;
	display: flex;
}

.col-1 {
	width: 8.33%;
}

.col-2 {
	width: 16.66%;
}

.col-3 {
	width: 25%;
}

.col-4 {
	width: 33.33%;
}

.col-5 {
	width: 41.66%;
}

.col-6 {
	width: 50%;
}

.col-7 {
	width: 58.33%;
}

.col-8 {
	width: 66.66%;
}

.col-9 {
	width: 75%;
}

.col-10 {
	width: 83.33%;
}

.col-11 {
	width: 91.66%;
}

.col-12 {
	width: 100%;
}

＆＃13;

<!DOCTYPE HTML>

<head>
	<title>FRONT-END NINJA</title>
	<link rel="stylesheet" type="text/css" href="FroEndNja.css">
</head>

<body>

<div class="row">
	<div class="col-2">Udacity Logo</div>
	<div class="col-10">JANE DOETTE<br>FRONT-END NINJA</div>
</div>

<div class="row">
	<div class="col-12">IMAGE</div>
</div>

<div class="row">
	<div class="col-12">FEATURED WORK</div>
</div>

<div class="row">
	<div class="col-4">IMAGE1</div>
	<div class="col-4">IMAGE2</div>
	<div class="col-4">IMAGE3</div>
</div>

<div class="row">
	<div class="col-4">TEXT1</div>
	<div class="col-4">TEXT2</div>
	<div class="col-4">TEXT3</div>
</div>

</body>

＆＃13;

谢谢，

Abhilash

Answer 1

尝试flex-direction属性，如果将其设置为repeat，它应该有效吗？此外，如果您使用flexbox，请使用autoprefixer，以便您的资料可以跨浏览器使用。

Answer 2

你的CSS中有一个额外的右括号，它会抛出错误

*{
    text-align: center;
}


} /* here */
.row {
    width : 100%;
    display: flex;
}

* {
  border: red solid 1px;
  box-sizing: border-box;
  text-align: center;
  margin: 0;
  padding: 0;
}
.row {
  display: flex;
}
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}

<!DOCTYPE HTML>

<head>
  <title>FRONT-END NINJA</title>
  <link rel="stylesheet" type="text/css" href="FroEndNja.css">
</head>

<body>

  <div class="row">
    <div class="col-2">Udacity Logo</div>
    <div class="col-10">JANE DOETTE
      <br>FRONT-END NINJA</div>
  </div>

  <div class="row">
    <div class="col-12">IMAGE</div>
  </div>

  <div class="row">
    <div class="col-12">FEATURED WORK</div>
  </div>

  <div class="row">
    <div class="col-4">IMAGE1</div>
    <div class="col-4">IMAGE2</div>
    <div class="col-4">IMAGE3</div>
  </div>

  <div class="row">
    <div class="col-4">TEXT1</div>
    <div class="col-4">TEXT2</div>
    <div class="col-4">TEXT3</div>
  </div>

</body>

为什么不显示：flex;工作？

2 个答案: