html - 如何制作 2 行 8 列 CSS

Question

• 如何在 CSS 中制作 2 行 8 列的表格？注意：桌子必须有严格和坚持的位置，

  我制作了 2 行和 8 列的表，并将文本模块添加到每一列，然后我将 HTML 代码添加到每个文本模块，以控制文本模块的行为并将文本模块转换为可编辑的 HTML 列拖放网站构建器插件。所以我在这方面取得了成功，现在问题是所有列都显示在行中，我的意思是现在我有 8 行，每行都有 1 列。当我将 HTML 代码添加到每个文本模块时，就会发生这种情况。这是我添加到每个文本模块以在可编辑列中转换文本模块的短 html。

HTML > 所有文本模块都添加了相同的代码...文本模块总数为 8

文本模块 1

   <div id="main-section2"></div>
    <div class="bg-wrapper-cover">
      <div class="row2">
        <div class="col-text-0"></div>
        <div class="bg-wrapper-cover-background"></div>
</div>

文本模块 2

   <div id="main-section2"></div>
    <div class="bg-wrapper-cover">
      <div class="row2">
        <div class="col-text-0"></div>
        <div class="bg-wrapper-cover-background"></div>
</div>

CSS：

#main-section2
.bg-wrapper-cover {
  width:500px;
  position:relative;
}
.row2 {
  display: flex;
  width:100%;
  margin:0px;
}



.col-text-0 {
  padding:0 14px;
  border:1px solid black;
  display:inline-block;
  width:calc(25% - 30px);
  height:50px;
  background:pink;
  z-index:10;
}

.bg-wrapper-cover-background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index :0;
  transition: background 3s;
}

.bg-wrapper-cover:hover .col-text-0 {
  background:none;
}
.bg-wrapper-cover:hover .col-text-0:hover {
  background:red;
}
.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(1):hover ~ .bg-wrapper-cover-background {
  background:blue;
  z-index:0;
}

.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(3):hover ~ .bg-wrapper-cover-background {
  background:darkgray;
  z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(5):hover ~ .bg-wrapper-cover-background {
  background:yellow;
  z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(7):hover ~ .bg-wrapper-cover-background {
  background:orange;
  z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(1):hover ~ .bg-wrapper-cover-background {
  background:gray;
  z-index:0;
}

.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(3):hover ~ .bg-wrapper-cover-background {
  background:black;
  z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(5):hover ~ .bg-wrapper-cover-background {
  background:green;
  z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(7):hover ~ .bg-wrapper-cover-background {
  background:lightblue;
  z-index:0;
}

快照

标签： htmlcss

Answer 1

为什么不只是具有以下样式的无序列表：

li:nth-child(2n) {
  margin-bottom: 10px;
}