Question

因此，我刚开始编写代码（大约几个星期），并且在为我的网站编写代码时碰壁。我想要一个这样的布局

请访问此处https://ibb.co/wYkV8XS，div可能并排放置，并且具有更多和更少内容之类的按钮。

但无法弄清楚如何将两个盒子并排放置，以及如何使按钮具有更多阅读和更少阅读的功能。谢谢

Answer 1

您想要这样的想法吗？（请在整页上尝试）

let a = document.querySelectorAll("button");
let b = document.querySelectorAll(".card");
for(let i=0; i < a.length; i++) {
a[i].addEventListener('click', function() {
    b[i].classList.toggle("toggle");
})
}

container{
  display:flex;
  flex-wrap:wrap;
  width:100%;
}

container div{
  display:flex;
  justify-content:space-around;
}

.card{
  width:25%;
  height:max-content;
  border:2px solid;
  box-sizing:border-box;
  text-align:center;
}

.card span{
  text-align:left;
  margin-bottom:1em;
  overflow:hidden;
  display: -webkit-box;
  text-overflow:ellipsis;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
}

.card.toggle span{
  -webkit-line-clamp: unset;
}

<container>
  <div>
<p class="card"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum finibus dolor quis pellentesque. Phasellus tincidunt elit et tellus auctor tincidunt. Fusce luctus quam ut dolor semper, in mattis orci varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi et lectus a nisl sodales dignissim. Suspendisse ornare eget nulla a porta. Donec at nisl eleifend, ultricies turpis rhoncus, vestibulum lacus. Proin nec erat erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, lacus eget consectetur finibus, sem dui eleifend magna, ut accumsan velit nulla nec mi. Curabitur dictum sagittis massa a condimentum. Aenean egestas turpis ut dolor convallis aliquam. Donec rhoncus enim sit amet odio molestie, porttitor tempus risus viverra.</span>
  <button>READ MORE</button></p>

<p class="card"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum finibus dolor quis pellentesque. Phasellus tincidunt elit et tellus auctor tincidunt. Fusce luctus quam ut dolor semper, in mattis orci varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi et lectus a nisl sodales dignissim. Suspendisse ornare eget nulla a porta. Donec at nisl eleifend, ultricies turpis rhoncus, vestibulum lacus. Proin nec erat erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, lacus eget consectetur finibus, sem dui eleifend magna, ut accumsan velit nulla nec mi. Curabitur dictum sagittis massa a condimentum. Aenean egestas turpis ut dolor convallis aliquam. Donec rhoncus enim sit amet odio molestie, porttitor tempus risus viverra.</span>
  <button>READ MORE</button></p>
  </div>

<div>
  <p class="card"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum finibus dolor quis pellentesque. Phasellus tincidunt elit et tellus auctor tincidunt. Fusce luctus quam ut dolor semper, in mattis orci varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi et lectus a nisl sodales dignissim. Suspendisse ornare eget nulla a porta. Donec at nisl eleifend, ultricies turpis rhoncus, vestibulum lacus. Proin nec erat erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, lacus eget consectetur finibus, sem dui eleifend magna, ut accumsan velit nulla nec mi. Curabitur dictum sagittis massa a condimentum. Aenean egestas turpis ut dolor convallis aliquam. Donec rhoncus enim sit amet odio molestie, porttitor tempus risus viverra.</span>
  <button>READ MORE</button></p>
  
  <p class="card"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum finibus dolor quis pellentesque. Phasellus tincidunt elit et tellus auctor tincidunt. Fusce luctus quam ut dolor semper, in mattis orci varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi et lectus a nisl sodales dignissim. Suspendisse ornare eget nulla a porta. Donec at nisl eleifend, ultricies turpis rhoncus, vestibulum lacus. Proin nec erat erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, lacus eget consectetur finibus, sem dui eleifend magna, ut accumsan velit nulla nec mi. Curabitur dictum sagittis massa a condimentum. Aenean egestas turpis ut dolor convallis aliquam. Donec rhoncus enim sit amet odio molestie, porttitor tempus risus viverra.</span>
  <button>READ MORE</button></p>
  </div>
  </container>

文本框与更多按钮并排

1 个答案: