小编Fel*_*A J的帖子

display:表格div,百分比宽度为1px bug

外部div有百分比宽度,内部div有display: tabel; width: 100%.

在调整大小时,内部div的显示比div一些页面宽度小1px .这会在右侧添加1px行.

https://jsfiddle.net/afelixj/utcswLp1/1/

这个bug有什么问题吗？

html css css-tables

Fel*_*A J

2018 10-29

12
推荐指数

1
解决办法

3990
查看次数

flexbox：在 Safari 中垂直分布元素

我需要在移动纵向视图中分发三个项目。使用过flex，它适用于除 safari 之外的所有其他浏览器。所以它在 iphone 中不起作用。

我已经使用align-content: space-between;和一flex-flow: row wrap;起来获得对齐。用于使其在 Safari 中工作的正确属性是什么？

-> 这是小提琴

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body{
  height: 100%;
  margin: 0;
}
.wrap{
  display: -webkit-box;display: -ms-flexbox;display: flex;
  -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
  -ms-flex-line-pack: justify;align-content: space-between;
  width: 100%;
  border: 1px solid red;
  height: 100%;
  
  -webkit-flex-flow: row wrap;
   flex-flow: row wrap;

}
div[class*="col"]{
  height: 50px;
  width: 100%;
  border: 1px solid green;
}

Run Code Online (Sandbox Code Playgroud)

<div class="wrap">
  <div class="col1">

  </div>
  <div class="col1"> …

Run Code Online (Sandbox Code Playgroud)

css flexbox

Fel*_*A J

2016 07-15

6
推荐指数

1
解决办法

4503
查看次数

使用 HTML 属性折叠边框

是否有等效于 CSS 属性的 HTML 属性border-collapse: collapse;？

我试图仅使用 HTML 实现相同的 1px 边框，而不使用 css。

table{
  border-collapse: collapse;
}

Run Code Online (Sandbox Code Playgroud)

<table border="1px" cellpadding="3">
  <tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
  </tr>
  <tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
  </tr>
</table>

Run Code Online (Sandbox Code Playgroud)

html

Fel*_*A J

lucky-day

4
推荐指数

1
解决办法

1万
查看次数

css mix-blend-mode：Safari 中的差异问题

我正在尝试使用以下鼠标悬停效果mix-blend-mode。它在 Chrome 和 Firefox 中按预期工作。

.btn-anim {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 1.25rem;
  color: #fff;
  --x: 66%;
  --y: -34%;
}

.btn-anim:after,
.btn-anim:before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  transition: transform cubic-bezier(0.88, 0.03, 0, 0.94) 0.3s;
}

.btn-anim:before {
  content: "";
  position: absolute;
  --tw-bg-opacity: 1;
  background-color: rgba(243, 109, 69, var(--tw-bg-opacity));
  z-index: -1;
  transform: translateX(var(--x));
}

.btn-anim:after {
  content: "";
  position: absolute;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  mix-blend-mode: difference;
  transform: translateX(var(--y)); …

Run Code Online (Sandbox Code Playgroud)

css mix-blend-mode

Fel*_*A J

2022 02-04

4
推荐指数

1
解决办法

6309
查看次数

内联元素之间的换行

在下面的代码中，我需要a在新行中放置标签并保持居中对齐。我无法更改 html。 display:block使文本外的更多可点击区域。

以下是所需结果的屏幕截图

div{
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}
a{
  color: red;
  display: inline-block;
  clear: both;
}

Run Code Online (Sandbox Code Playgroud)

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>

Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/afelixj/nq7ow9eq/

css

Fel*_*A J

2016 03-31

3
推荐指数

1
解决办法

406
查看次数

将 flexbox 与 flex-direction:column 对齐到垂直中心

如何将项目对齐到垂直中心？

我同时使用flex-direction: column;和align-items: center;。

.box{
border: 1px solid red;
width: 100%;
height: 180px;

display: -webkit-box;
display: -ms-flexbox;
display: flex;

-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;

-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.item{
width: 20%;
border: 1px solid green;
}

Run Code Online (Sandbox Code Playgroud)

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Run Code Online (Sandbox Code Playgroud)

css flexbox

Fel*_*A J

2019 03-19

1
推荐指数

1
解决办法

667
查看次数