时间戳

首页 > 解决方案 > CSS / HTML创建两个并排，等宽，可折叠的列，在扩展后保留列宽，使用网格？

html - CSS / HTML创建两个并排，等宽，可折叠的列，在扩展后保留列宽，使用网格？

问题描述

这是我在这里的第一个问题，因为我是新手，所以我希望我能解释一下我需要什么......

我正在尝试并排创建两个可折叠的“按钮”（每个按钮大约占屏幕宽度的一半），单击它们时会展开以显示同样宽的文本列（每列大约占一半屏幕宽度）。（仅供参考，每列中的内容都是代码。）我只使用 CSS 网格和 HTML（尽管我愿意使用 flexbox，但在这种情况下它更有意义。）这种两列格式将在页面下方重复无数次。

正如我现在设置的样式一样，我的按钮宽度不正确，单击时，它们各自的内容不起作用（我认为它会扩展以填满屏幕的整个宽度然后换行）。

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
.collapsible {
  background-color: #eee;
  color: green;
  cursor: pointer;
  padding: 18px;
  width: 50%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible:after {
  content: '\02795';
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 20px;
}

.active:after {
  content: "\2796";
}

.active,
.collapsible:hover {
  background-color: #ccc;
}

.code {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  width: 50%;
  background-color: #f1f1f1;
}

.code-buttons {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1;
}

.collapsible[name="css_button"] {
  grid-column: 1;
}

.collapsible[name="html_button"] {
  grid-column: 2;
}
<div class="code-buttons">
  <button type="button" class="collapsible" name="css_button">Media Object CSS</button>
  <pre class="code">
           <code id="media_objects_css">
        <!-- Expanded Column Content -->
           </code>
         </pre>

  <button type="button" class="collapsible" name="html_button">Media Object HTML</button>
  <pre class="code">
          <code id="media_objects_html">
       <!-- Expanded Column Content -->
          </code>
        </pre>
</div>

标签： htmlcsscss-grid

解决方案

你有正确的想法，只是你的网格区域只需要两个元素作为它的直接子元素，而你有 4 个元素作为直接子元素（按钮和 pre 标签）。我已将您的两个按钮及其各自的 pre 标记放在它们自己的 div 标记中，在您的网格中只允许 2 个直系子项：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
.collapsible {
  background-color: #eee;
  color: green;
  cursor: pointer;
  padding: 18px;
  width: 50%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible:after {
  content: '\02795';
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 20px;
}

.active:after {
  content: "\2796";
}

.active,
.collapsible:hover {
  background-color: #ccc;
}

.code {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  width: 50%;
  background-color: #f1f1f1;
}

.code-buttons {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1;
}

.collapsible[name="css_button"] {
  grid-column: 1;
}

.collapsible[name="html_button"] {
  grid-column: 2;
}
<div class="code-buttons">
  <div>
    <button type="button" class="collapsible" name="css_button">Media Object CSS</button>
    <pre class="code">
           <code id="media_objects_css">
        <!-- Expanded Column Content -->
           </code>
         </pre>

  </div>
  <div>
    <button type="button" class="collapsible" name="html_button">Media Object HTML</button>
    <pre class="code">
          <code id="media_objects_html">
       <!-- Expanded Column Content -->
          </code>
        </pre>
  </div>
</div>

推荐阅读