Question

我正在尝试使这些divs（表格单元格）适合较短的屏幕。例如，divs应该在较短的屏幕上变成列表视图。相反，它会剪辑到屏幕的末尾，而其他divs则无法访问。

我尝试更改position并使用table-layout，但没有得到任何结果。

#container {
    display: table;
    border-collapse: separate;
    border-spacing: 90px;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
}
#section {
  color: white;
  height: 250px;
  background-color: blue;
  text-overflow: ellipsis;
  word-wrap: break-word;
  min-width: 250px;
  display: table-cell;
  padding: 25px;
}
#section div {
  display: table-cell;
  vertical-align: middle;
  color: white;
  font-size: 14px;
  min-width: 250px;
  height: 250px;
  position: absolute;
}

<div id="container">
  <div id="section">
    <h1>Hello</h1>
    <div>
      This is some text
    </div>
  </div>
  <div id="section">
    <h1>Hello 2</h1>
    <div>
      This is some text
    </div>
  </div>
  <div id="section">
    <h1>Hello 3</h1>
    <div>
      This is some text
    </div>
  </div>
  <div id="section">
    <h1>Hello 4</h1>
    <div>
      This is some text
    </div>
  </div>
</div>

Answer 1

#container {
    display: table;
    border-collapse: separate;
    border-spacing: 90px;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
}
#section {
  color: white;
  height: 250px;
  background-color: blue;
  text-overflow: ellipsis;
  word-wrap: break-word;
  min-width: 250px;
  display: table-cell;
  padding: 25px;
}
#section div {
  display: table-cell;
  vertical-align: middle;
  color: white;
  font-size: 14px;
  min-width: 250px;
  height: 250px;
  position: absolute;
}

@media only screen and (max-width: 600px) {
#container {
    display: table;
    border-collapse: separate;
    border-spacing: 90px;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
}
#section {
  color: white;
  height: 250px;
  background-color: blue;
  text-overflow: ellipsis;
  word-wrap: break-word;
  min-width: 250px;
  display: table-cell;
  padding: 25px;
  float: left;
}
#section div {
  display: table-cell;
  vertical-align: middle;
  color: white;
  font-size: 14px;
  min-width: 250px;
  height: 250px;
  position: absolute;
}
}

 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head> 

<div id="container">
  <div id="section">
    <h1>Hello</h1>
    <div>
      This is some text
    </div>
  </div>
  <div id="section">
    <h1>Hello 2</h1>
    <div>
      This is some text
    </div>
  </div>
  <div id="section">
    <h1>Hello 3</h1>
    <div>
      This is some text
    </div>
  </div>
  <div id="section">
    <h1>Hello 4</h1>
    <div>
      This is some text
    </div>
  </div>
</div>

正如潜伏者所说，您应该增加一些底部或顶部边距

如何获得这些表格部分以适合屏幕的宽度？

1 个答案: