Hi I am facing problem on using column. when I set image absolute in the child column,it breaks the column. image with position absolute in item 4 breaks the column
In the origin design, it uses flex and no such problem.
original design,image at the bottom of item 4
original code
<div class="column-container" style="padding: 20px 30px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>
4
<div style="position: relative">
<img
style="position: absolute; top: 0; right: 0"
src="https://dummyimage.com/600x400/000/fff"
/>
</div>
</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
</div>
.column-container {
display: flex;
flex-wrap: wrap;
}
.column-container div {
width: 25%;
}
img {
height: auto;
max-width: 200px;
}
new design
<div class="column-container" style="padding: 20px 30px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>
4
<div style="position: relative">
<img
style="position: absolute; top: 0; right: 0"
src="https://dummyimage.com/600x400/000/fff"
/>
</div>
</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
</div>
.column-container {
column-count: 4;
}
img {
height: auto;
max-width: 200px;
}
I try to use backface-visibility: hidden
and transform: translate3d(0,0,0);
but it doesnt work, may i know there is any way to let the column design looks like the original design, thanks
s0778615 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.