Question

我是以下代码。 div和字体调整大小与我完美配合。

我首先考虑使用移动设备进行设计，因此对于小屏幕，widgets会根据需要相互接触。

在大屏幕上，如笔记本电脑，3个小部件应该彼此相邻。不幸的是，我仍然在彼此之下，每行一个小部件。

我错过了什么，或者我在这里做错了什么？

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
html,
body {
  font-family: Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5
}
html {
  overflow-x: hidden
}
h1 {
  font-size: 5.7vw;
}
h2 {
  font-size: 4.0vw;
}
h3 {
  font-size: 2.8vw;
}
.widget {
  position: relative;
  padding: 0.01em 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 10px;
  margin-right: 0px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)!important;
  width: 30vw;
}
.topleft {
  position: relative;
  text-align: left;
  left: 0;
  top: 0;
  opacity: .3
}
.bottomright {
  position: relative;
  text-align: right;
  right: 0;
  bottom: 0;
  opacity: .3
}
/*	p {font-size: 2.5vw;}  */

.kpi {
  text-align: center;
  line-height: 6vw;
  font-size: 7vw;
  margin: 0 0 0 0;
}
@media (max-width: 1024px) {
  /*       p {font-size: 3.5vw;}  */
  .kpi {
    font-size: 11.5vw;
    line-height: 10.5vw;
  }
  .widget {
    width: 50vw;
  }
}
@media (max-width: 600px) {
  /*       p {font-size: 3.5vw;}  */
  .kpi {
    font-size: 20vw;
    line-height: 19vw;
  }
  .widget {
    width: 85vw;
  }
  .topleft {
    font-size: 4vw;
  }
  .bottomright {
    font-size: 6vw;
  }
}
@media (max-width: 800px) {
  aside,
  section {
    width: auto;
    float: none;
  }
}

＆＃13;

<main class="main" .style="{ display: flex; /* or inline-flex */ flex-direction: row;}">
  <div class='widget'>
    <p class='topleft'>SoH</p>
    <p class='kpi'>12345</p>
    <p class='bottomright'>KG</p>
  </div>
  <div class='widget'>
    <p class='topleft'>SoH</p>
    <p class='kpi'>12345</p>
    <p class='bottomright'>KG</p>
  </div>
  <div class='widget'>
    <p class='topleft'>SoH</p>
    <p class='kpi'>12345</p>
    <p class='bottomright'>KG</p>
  </div>
</main>

＆＃13;

Answer 1

您有语法错误。

这是错误的：

<main class="main" .style="{ display: flex; /* or inline-flex */ flex-direction: row;}">

应该是：

<main class="main" style="display: flex; flex-direction: row;">

jsFiddle

<强>更新

使用flex-wrap:wrap将其正确地包装在行/列中，以使其最佳地显示在屏幕上

<main class="main" style="display: flex; flex-wrap:wrap;">

Answer 2

看起来你在样式标签前面有一段时间。这可能就是为什么它没有拿起显示器：flex，但我也会添加flex-wrap：wrap; justify-content：center（或space-around，space-between，无论你喜欢哪个）和align-items：flex-start或center。

如果您希望媒体查询位于将弹性方向更改为列的列中，您可能还需要添加媒体查询。

希望有所帮助！

柔性物品不能并排排列

2 个答案: