小编Awa*_*ais的帖子

我有一份商品清单。我需要在二维列表中显示它们。每个商品都有子元素：照片、标题、描述、价格和购买按钮，必须以这种方式调整大小和位置：商品行中的所有标题、描述、价格和照片必须位于相同的 y 坐标位置，并且具有height 是一行中对应高度元素的最大值。

我试过这个：“网格模板行：1fr 1fr 1fr 1fr 30px;” 使一行中的所有子元素都位于相同的 y 位置，但我需要它们的高度以适应内容并且不高于一行中的最大元素。PS 您可以使用 flex 或任何您想要的方式提供代码。

代码

.Grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat( auto-fill, 280px);
}

.loon-card {
  grid-template-rows: 1fr 1fr 1fr 1fr 30px;
  display: grid;
  grid-gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

.long-description {
  border-top: 1px solid #ddd;
}

<div class="Grid">

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. …

恼人的问题

当我放大我的视口窗口(在firefox,chrome中),然后水平向右滚动时,我的背景图像被剪裁

图像最能描绘出正在发生的事情:

放大

- 图像仅与视口一样宽

缩小输出 - 问题不会发生

以下是我的css中可能相关的部分内容:

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body{ width: 100%; }
header#header { width: 100%; }
header#header #background-image {
  height: 150px;
  background: url(/images/header/silhouette.png) repeat-x;
} 

无论是否应用cssgradients都会发生这种情况 - 真的难倒在这里

我正在尝试使用CSS为汽车设置动画。我设法使车轮和汽车动起来了。

汽车进站，停车然后下车。此动画循环播放。

现在，当汽车停下来时，我也需要停止轮子。但我似乎无法实现。

这是我到目前为止的内容：

@keyframes wheel{
 0%{
   transform: rotate(0deg)
  }
  
    35% {
    transform: rotate(-90deg)
  }
  36%,
  56% {
    transform: rotate(-180deg)
  }
  
 100%{
   transform: rotate(-359deg)
  }
}

@keyframes moving {
  0% {
    right: -80em;
    animation-timing-function: ease-out;
  }
  35% {
    right: 0;
  }
  36%,
  56% {
    right: 0;
    animation-timing-function: ease-in;
  }
  100% {
    right: 120%;
  }
}

@keyframes stableWheel {
  from {transform: translateY(-.0em);}
  to {transform: translateY(-.0em);}
}


.car{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  position: relative;
  width: 600px;
  height:271px; …

我刚刚完成了一个中型网站，我注意到我的 CSS 组织的一件事是我在整个网站中有很多硬编码的颜色值。这显然不利于可维护性。一般来说，当我设计一个网站时，我会为主题选择 3-5 个主要颜色。我最终在主 css 的开头为段落、链接等设置了一些默认值，但某些组件会更改颜色（例如图例标签）并要求我使用我想要的颜色重新设置样式。你如何避免这种情况？我正在考虑为每种颜色创建单独的规则，并在需要重新设计样式时使用这些规则。

IE

.color1 {
    color: #3d444d;
}

display:block和display:inline有什么区别

mat-list控件在这里有:https: //material.angular.io/components/list/overview

是否可以使用前面的复选框启动列表项(而不是由于默认值而在末尾进行后缀)？

我试过这个,但没有运气!

/* mat-list: atempt to move the checkboxes to the far left */
.mat-pseudo-checkbox {
  left: 0 !important;
}

我有一个带有fixed header角材料的z-index网站1100。

虽然mat-menu我的网站中有一些与标题重叠z-index:1200并具有类cdk-overlay-container（角度材料类），但这是默认行为。

为了覆盖这个，我只需减少 to ，cdk-overlay-container z-index使其1000落后于fixed header，一切都对我来说没问题。

问题

但是，当我打开使用相同cdk-overlay-container和相同的材质对话框时z-index，它会在该覆盖层上方显示我的固定标题，因为它很高z-index，所以任何想法如何通过添加不同的来实现上述场景，class以便cdk-overlay-container我的内容mat-menu落后于fixed header但我mat-dialog最重要的内容。

屏幕截图

正常场景 https://www.screencast.com/t/XhB2szH3gZe

问题场景 https://www.screencast.com/t/fYrMYFEOd

我有一个通过类型脚本解决方案（当对话框显示较低的标题的 z-index 时），但我需要一些纯 CSS 解决方案。

谢谢！

可能重复:
垂直居中变量高度图像,同时保持最大宽度/高度

所以这是一个问题,我有不固定尺寸的图像,我只知道高度或宽度必须是200px.现在我想将这个图像放在固定大小为200px x 200px的div中,并将其垂直和水平居中.可能吗？

我搜索了很多问题,但没有人回答我的问题,这应该是解决问题所有问题.