背景隐藏行边框？

Question

feed_page: {
    margin: 'auto'
  },

  feed_list: {
    margin: 'auto'
  },

  feed_item: {
    textAlign: 'center',
    backgroundColor: '#fff',
    borderBottom: '1px solid #e0e0e0',
    margin: '10px'
  }
  // ...
  <
  div style = {
    this.stylesheet.feed_page
  } >
  <
  List style = {
    this.stylesheet.feed_list
  }
height = {
  1400
}
rowCount = {
  this.testPosts.length
}
rowHeight = {
  50
}
width = {
  800
}
rowRenderer = {
  this.b_listItemRender
}
/> <
/div>

listItemRender({
  index, // Index of row
  isScrolling, // The List is currently being scrolled
  isVisible, // This row is visible within the List (eg it is not an    overscanned row)
  key, // Unique key within array of rendered rows
  parent, // Reference to the parent List (instance)
  style
}) {
  style = {
    ...style,
    ...this.stylesheet.feed_item
  }

  return ( <
    div key = {
      key
    }
    style = {
      style
    } > {
      this.testPosts[index]
    } <
    /div>
  );
}

这导致（我手动关闭了 1 行的背景）：

两期：

未遵守行间距
borderBottom 在下一行项目的背景后面渲染，如果我手动将下一行项目向下移动 1px 或将样式设置为 49px 的高度，它就会显示出来。

我搞砸了什么？我需要在行元素之间有一个 space 并且每个元素都有一个边框

Answer 1

要达到预期结果，请使用以下选项

边距 - 显示，包括到下一个元素顶部的边距 px 用于间距

第一个元素 - 前 50 像素
第二个元素 - top 50px + 1px border + 10px margin = 61px;
第三个元素 - 61 + 51 + 10px 边距 = 122px
高度 = 内容的高度。（边界和填充不包括在计算中。），因此元素的高度为 50 + border bottom 1px ，因此下一个元素必须从顶部 51 开始，第三个元素必须从顶部 102 px (51+51)

代码示例- https://codepen.io/nagasai/pen/YaXVox

<div style="width:auto;height:250px;max-width:800px;max-height:250px;overflow:hidden;position:relative;border:1px solid blue;">
  <div style="width:100%;height:50px;max-width:800px;max-height:250px;overflow:hidden;position:absolute;top:0;margin:10px;border-bottom:1px solid black;background-color:red">i'm a post</div>
  
  <div style="width:100%;height:50px;max-width:800px;max-height:250px;overflow:hidden;position:absolute;top:61px;margin:10px;border-bottom:1px solid black;background-color:red">i'm a second post</div>
  
  <div style="width:100%;height:50px;max-width:800px;max-height:250px;overflow:hidden;position:absolute;top:122px;margin:10px;border-bottom:1px solid black;background-color:red">i'm third post</div>
</div>

选项 2： 要解决的其他选项是使用以下 CSS、

创建 class

.row{
width:100%;
height:50px;
max-width:800px;
max-height:250px;
overflow:hidden;
margin:10px;
border-bottom:1px solid black;
background-color:red
}

解释：

移除 position absolute 和 top ，然后只有 margin 会占用 spacing 和 border-bottom

选项 2 的代码示例 - https://codepen.io/nagasai/pen/aYOwNm?editors=1100

.row{
width:100%;
height:50px;
max-width:800px;
max-height:250px;
overflow:hidden;
margin:10px;
border-bottom:1px solid black;
background-color:red
}

<div style="width:auto;height:250px;max-width:800px;max-height:250px;overflow:hidden;position:relative;border:1px solid blue;">
  <div class="row">i'm a post</div>
  
  <div class="row">i'm a second post</div>
  
  <div class="row">i'm third post</div>
</div>

背景隐藏行边框？

Row border hidden by background?

css

reactjs

react-virtualized