cost 302 ms
使用CSS列进行图像网格处理,有时会堆积图像 - Using css columns for image grid, sometimes images stack

我正在使用此处介绍的技术,但遇到一个问题,有时图像按预期排列在列中,但有时它们堆叠在彼此的下面,这不是我想要的。 我尝试添加white-space:nowrap ,它使图像显示在同一行上,但它也消除了column-gap并使图像左对齐而不是居中对齐。 我创建了一个Codepen来说明 ...

Html元素没有采用绝对定位和flexbox内部的全宽度 - Html element not taking up its full width with absolute positioning and inside flexbox

右侧的灰色块( https://jsfiddle.net/var6u4g7/ )不占用其内容的全部宽度。 它使用righttext的大小,如果在righttext元素中添加更多单词,您将看到灰色框正好占据了该宽度。 我不想指定一个固定的宽度,因为我不知道它里面有多少,所以我希望它的内容和它的 ...

以相同的块尺寸将不同尺寸的图像居中 - Center different size images in the same block size

我将不同的图像封装在方形样式块中,我希望始终将它们居中放置,但是我花了很多时间试图使它们这样做。 我举例说明了类似设计中发生的事情。 请注意,产品(烧烤架)实际上并未在imgblock容器中居中。 对于其他宽于窄的产品图像,这开始变得很明显。 .imgBlock { ...

如何仅在Flex中用CSS相等地分隔空div? - How to equally space empty divs with CSS only in flex?

因此,我的结构与下面的代码段非常相似。 我遇到的问题是,我正在努力使div(例如child相对于容器始终处于相同的高度,即使它们为空。 因此,如果有两个孩子,则必须有父母的50%;如果有三个孩子,则必须占父母的33.3%。 做了很多挖掘工作,尝试使用flex-grow并将其设置在子级上,如 ...

指针事件-使用Tab键时,任何事件均不起作用 - pointer-event - none is not working when I use tab key

我正在制作一个表单,其中我在使用Class来使用偶数指针禁用输入:无,当我尝试单击正确的输入时,我的输入不可编辑,但是当我使用“ TAB”键时,是专注于输入,我可以编辑输入,如何防止焦点不应该使用Tab键进入我的输入,而应该允许编辑输入。 您的早期答复表示赞赏。 ...

2019-05-30 03:39:56   1   56    html / css3  
在高DPI显示器上改变div背景和边框之间的0-1px间隙 - Varying 0-1px gap between div background and border on High-DPI displays

这是我在CSS中创建的按钮的一个独立示例。 它具有1px边框和渐变,以及背景渐变。 背景渐变实现为伪元素,以允许其悬停时不透明度变淡。 https://codepen.io/anon/pen/wbYoeo?editors=1100 该按钮在不同DPI的监视器之间不会相同。 在 ...

Flexbox根据内容自动确定容器的大小(宽度)(问题) - Flexbox auto determining size (width) of container based on content (problem)

我有一个链接到jsFiddle将提出问题。 基本上,问题出在中间容器( sector2为蓝色容器),它以列方向弯曲并具有5个flex子元素。 其中四个元素是尺寸为150x150px的图像。 我已经将image-wrapper (每个子元素的类)赋予flex: 1 ,这意味着蓝色容器应该被分 ...

在flex容器中拉伸的图像但不能使用align-self-center - Images stretched in flex container but cannot use align-self-center

我有以下标记(引导程序4): 由于容器是弯曲的,因此图像在拉伸。 我知道align-self-center将解决问题,但是,我不希望图像居中。 我想要的形象是align-self-left (左对齐,而不是居中),但这再次拉伸的图像。 可以解决吗? ...

将表体设置为阻止时,我的表头调整大小只能使该部分可滚动,我该如何防止? - My table header resizes when setting table body to block to only make that part scrollable, how do I prevent that?

所以,我尝试创建一个只有主体可滚动的表,但似乎无法解决这个问题。 表头当然应该与表体一样宽..我做错了什么? 视觉效果 这是我的表格的HTML和CSS: (注意:我通过JS插入表行) ...

2019-05-29 07:25:31   1   23    html / css / css3  
从文档流中删除元素 - Removing Element from Document Flow

我正在使用[type=checkbox]记录我创建的自定义下拉菜单的用户输入。 我还将它用于浏览器中的required功能。 但是,我遇到的问题是,当用户尝试提交表单时未填写该部分时,该元素似乎至少需要1px的height才能触发浏览器警告消息。 这是一个问题,因为下拉菜单的he ...

如何在JS fadein和fadeout幻灯片中插入CSS转换旋转动画? - How to insert a CSS tranform rotate animation in JS fadein and fadeout slideshow?

我有一个想法,但我不能应用它,因为我不是很熟悉Javascript。 我的问题是我有一个用于fadein和fadeout幻灯片的JS脚本,但是,在转换期间进行页面旋转似乎很好。 我有一个CSS悬停样式来执行此操作[.card:hover .card__side - front {transf ...


 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM