小编LGS*_*Son的帖子

我有一个<div>,当它徘徊时,我正在显示一个<div>包含图标的孩子.

由于图标高于文本,因此新图标会更改父级<div>的高度.它也改变了<div>宽度,因为它插在最后.

我的问题:我希望<div>隐藏图标(带display:none)但仍然具有相同的大小,就像图标在那里(不使用静态宽度/高度).因此,当用户将鼠标悬停在<div>图标上时,将显示图标,但<div>尺寸将保持不变.

那可能吗？

.container {
  display: flex;
}

.row {
  border: 1px solid black;
  cursor: pointer;
  display: flex;
}

.row:hover .icon {
  display: flex;
}

.icon {
  display: none;
}

<div class="container">
  <div class="row">
    <div class="text">This is my div. When it is hovered, I dont want it to change width and height because of the icon.</div>
    <div class="icon"><img src="http://i.imgur.com/NpIpU3F.png"></div>
  </div>
</div>

在CodePen …

我有一个<img>右边的面板,其中包含一个控件标题和一长串项目.所以我有一个嵌套的flexbox情况:

.container (flex)
 -> .child img
 -> .child controls panel (flex)
  -> .controls
  -> .content-wrapper scrolling list

在一个非常基本的层面上,两个并排面板很容易,是一个简单的flex align-items: stretch... https://codepen.io/neekfenwick/pen/MOxYxz

在这个基本级别上,如何保持两个并排相同高度的div是一个重复的问题？.

一旦右侧的面板与垂直滚动列表变得更加复杂,我无法看到如何使其父级的高度,第二个.child与第一个的高度相匹配.child. https://codepen.io/neekfenwick/pen/XzGJGw

+-------------+---------------+
|             |  Controls     |
| Left child  |               |
|             +---------------+
|             |              A|
|             | Vertically   |+
|             | scrolling    ||
|             | items        ||
|             |              |+
|             |              V|
+-------------+---------------+

我已经阅读了具有可滚动内容的Flexbox项目,但这解决了水平滚动问题,而不是像这样的垂直布局.另外,带滚动区域的嵌套弹性框处理垂直堆叠的嵌套弹性框,我认为这种组合row和column方向混淆了我的情况.

作为代码段:

.container …

我收到了我在此处发布的问题的答案Flex grid: Alternate left and right。

但我的要求刚刚改变，我正在努力完成这个任务。与链接的问题一样，我希望 L & R div 占其容器的 70%，但现在我需要在每个 L & R div 末尾有一条线（虚线），但该线必须运行容器的 100%。我让它可以左右浮动，但需要它是 Flexbox，Flexbox 的变量和属性太多，很难知道从哪里开始。

L
-------------
            R
-------------
            R
-------------
            R
-------------
L

在下面的示例中，我想防止拉伸的孩子溢出父级。我不想为其指定宽度。我怎样才能做到这一点？

#flex-parent { display: flex; width: 200px; background: green; padding: 10px; }
#fixed-child { width: 20; background: red }
#stretched-child { background: yellow; word-wrap: break-word }

<div id="flex-parent">
  <div id="fixed-child">
FIXED
  </div>
  <div id="stretched-child">
  STREEEEEEEEEEEEEEEEEEEEEEEEEEEECHED
  </div>
</div>

我有这样的标记：

HTML：

<ListElementRoot>
  <ListElementText>
    {children}
  </ListElementText>
  <ListElementDescription>
    {description}
  </ListElementDescription>
</ListElementRoot>

//平台.web.js

export const ListElementRoot = div(style.root)
export const ListElementIcon = div(style.icon)
export const ListElementText = div(style.text)
export const ListElementDescription = div(style.description)

//CSS

.root {
  display: flex;
  width: 100%;
  height: 56px;
  align-items: center;
  border-top: 1px solid var(--color-gray2);
  padding: 0;
}

.icon {
  position: absolute;
  width: 28px;
  height: 28px;
  align-items: center;
  padding-left: 18px;
}

.text {
  color: #000;
  font-size: calc(var(--font-size-body) / 10)rem;
  padding-left: 64px;
}

.description {
  color: #000;
  font-size: calc(var(--font-size-body) / …

Safari 中存在一定的行高问题。

与 Chrome、Firefox 和 Explorer 相比，Safari 中的文本向上移动 3-4 像素。

可以为 safari 做些什么，以便一切都正确渲染。

行高：正常不起作用。

我有用于flex的通用CSS（SCSS）样式：

.flex {
  display: flex;    
  &.v {
    flex-direction: column;
  }
  &.h {
    flex-direction: row;   
  }  
  > * {
    flex: 0 0 auto;
  } 
  > .fill {
    flex: 1 1 auto;
 }  
 &.auto {
    overflow: auto;
 }
}

在Chrome上运行正常：https： //codepen.io/anon/pen/baLBNG

但是，在MS-Edge上，滚动条位于整个屏幕上（不仅限于内部面板）。

有什么建议吗？

我使用 Flex 时的边距出现了一些意外的行为，我需要一些帮助来理解原因。

我有一些简单的 html，如下所示：

<div className="dashboard">
    <div className="dashboard__inner-container">Inner Container</div>
</div>

我的 scss 文件如下所示：

.dashboard {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: #f4f6f8;
}

.dashboard__inner-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  flex: 1 1 auto;
  width: 100%;
  margin: 100px 50px;
}

我期望的是内部容器将完全填满父容器，顶部和底部减去 100px，左右减去 50px。垂直边距按预期工作，但水平边距实际上延伸到父 div 之外，因此内部容器看起来仍然占据了父 div 的整个宽度。

我不确定这是否与 Flexbox 有关。

这是一个孤立的 CodePen https://codepen.io/MaxMillington2/pen/EQWZoj

我不知道怎么做，但我已经研究了几个小时，但无法弄清楚。

我试图让 div 具有固定的宽高比1:1，但这个padding-top技巧不起作用。

这是我的代码：

HTML：

<div class="test">
  <div/><div/><div/><div/>
</div>

CSS：

.test {
  width: 50px;
  height: 0px;
  padding-top: 100%;
  background: blue;
}

谁能弄清楚我做错了什么吗？

JSFiddle 链接： http: //jsfiddle.net/ajpgbc0L/

预期结果： http: //jsfiddle.net/ajpgbc0L/2/

编辑：我应该明确表示宽度可以是任何东西

我正在尝试从数据库加载视图，正如文章中所建议的，人们可能想要添加一些缓存以防止每次都访问数据库。

ConfigureServices：

services.AddHttpContextAccessor();
services.AddMemoryCache();

services.AddRazorPages()
    .AddRazorRuntimeCompilation(opt =>
    {
        opt.FileProviders.Add(new DatabaseFileProvider(Configuration["AppSettings:SQLConnectionString"]));
    });

DatabaseFileProvider构造函数：

private string _connection;

public DatabaseFileProvider(string connection)
{
    _connection = connection;
}

如何将 的实例依赖注入IMemoryCache到DatabaseFileProvider类中？就像使用单例一样：

ConfigureServices：

services.AddSingleton<AppUtils>();

AppUtils构造函数：

private static IMemoryCache _cache;

public AppUtils(IMemoryCache cache)
{
    _cache = cache;
}