css 在库中展开的框

mwg9r5ms 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(118)

我想弄清楚如何扩大一个框的大小一些框在一个“画廊”。我需要它的方式，它不混乱的其他框，也没有其他网页元素。它应该扩大和折叠。有八个框，当我点击其中之一，它应该采取所有八个框的空间，当我再次点击它，它应该折叠到原来的一个框大小。当展开时，它还应该为每个框显示不同的内容。

我试过使用css的目标属性和锚标签。你们会用什么解决方案呢？
下面是我代码试用：

<a href="#odontopediatria">
    <div class="trat-card">
        <div class="trat-icone"><i class="fas fa-tooth"></i></div>
        <div class="trat-titulo">Odontopediatria</div>
    </div>
    <a href="#_" class="lightbox" id="odontopediatria">
        <div class="lightbox-conteudo">
            <div class="trat-texto">
                <i class="fas fa-tooth fa-3x"></i>
                <p>Odontopediatria é a especialidade que tem como objetivo o diagnóstico, a prevenção, o tratamento e o controle dos problemas de saúde bucal do bebê, da criança e do adolescente.
                </p>
            </div>
        </div>
    </a>
</a>

    
.lightbox {
  text-align: center;
  color: white;
  font-size: 22px;
  display: none;
}

.lightbox:target {
  display: block;
  top: 0;
}

.lightbox div:nth-child(n) {
  position: absolute;
    left: 0;
  display: flex;
    flex-direction: column;
    width: 100%;
    height: 306px;
    border-radius: 4px;
    align-items: center;
    justify-content: space-around;
  padding: 30px;
  margin: 0 auto;
}

css

来源：https://stackoverflow.com/questions/65277578/box-that-expand-in-a-gallery

2条答案

按热度按时间

whlutmcx1#

试试这样的东西

.container{
    display: flex;
    height: 400px;
    width: 600px;
    position: relative;
    flex-wrap: wrap;

  }
  .box{
    flex: 0 0 200px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
  .box:active{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }
  .box.box1{
    background-color: red;
  }
  .box.box2{
    background-color: greenyellow;
  }
  .box.box4{
    background-color: blue;
  }
  .box.box5{
    background-color: red;
  }
  .box.box6{
    background-color: yellow;
  }
  .box.box3{
    background-color: orange;
  }
  .box1:active::after{
    content: 'some text for the box1';
      flex: 0 0 100%;
  }
  .box2:active::after{
    content: 'some text for the box2';
      flex: 0 0 100%;
  }
  .box3:active::after{
    content: 'some text for the box3';
      flex: 0 0 100%;
  }
  .box4:active::after{
    content: 'differnt text for box 4';
      flex: 0 0 100%;
  }
  .box5:active::after{
    content: 'hello there';
      flex: 0 0 100%;
  }
  .box6:active::after{
    content: 'ciao bello';
      flex: 0 0 100%;
  }
  a{
      flex: 0 0 100%;
  }

<div class="container">
    <div class="box box2"><a>box1</a></div>
    <div class="box box1"><a>box2</a></div>
    <div class="box box3"><a>box2</a></div>
    <div class="box box4"><a>box2</a></div>
    <div class="box box5"><a>box2</a></div>
    <div class="box box6"><a>box2</a></div>
  </div>

赞(0）回复(0）举报 2023-01-10

gg0vcinb2#

这是一个演示你想要什么，我用一个小的jQuery代码管理一个切换类，这有助于使CSS扩大小方块到大。

$(document).ready(function() {
  $(".expandable_box").click(function() {
    $(this).parent(".main_col").toggleClass("expanded");
  });
});

body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

.main_container {
  padding: 0px 5px;
}

.main_row {
  display: flex;
  flex-wrap: wrap;
  margin: 0px -5px;
  position: relative;
}

.main_col {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0px 5px;
  margin: 5px 0px;
  text-align: center;
}

.main_col.expanded {
  position: absolute;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.expandable_box {
  padding: 30px;
  background-color: #3ca6b6;
  color: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.expanded .expandable_box {
  min-height: 100%;
  background-color: #0c798a;
}

.expandable_box h4 {
  margin: 20px 0px 0px;
}

.expandable_box p {
  display: none;
  margin: 0px;
  padding: 15px 0px 0px;
  visibility: hidden;
  opacity: 0;
}

.expanded .expandable_box p {
  display: block;
  visibility: visible;
  opacity: 1;
}

@media(max-width: 991px) {
  .main_col {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Same Place Expander</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="main_container">
    <div class="main_row">
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/a35ed2bddb.js" crossorigin="anonymous"></script>
</body>

</html>

赞(0）回复(0）举报 2023-01-10

我来回答

css 在库中展开的框

2条答案

相关问题

热门标签

最新问答