时间戳

首页 > 解决方案 > CSS Div 容器显示更多内容

javascript - CSS Div 容器显示更多内容

问题描述

我有一个包含内容的 div 容器：

    <div class="myBtn" tabindex="0">

    Line 1

    Line 2

  </div>

而这个 CSS-Code 来改变大小

div.myBtn:focus {
  height: 100px;
  background-color: gray;
}

div.myBtn {
  height: 50px;
  background-color: gray;
  border-radius: 10px;
  width: 200px;
  outline: none;
  transition: 0.5s;
}

现在我想补充一点，div 仅在“小模式”第 1 行和较大模式第 1 行和第 2 行中显示。

我也想补充一点，div中图像的大小随大小而变化

标签： javascripthtmlcss

解决方案

根据高度变化隐藏/显示内容不是一个好主意。

相反，将隐藏内容的默认显示设置为none，然后在某些条件下将其修改为所需的显示样式。

例如：

.line2{
    display: none;
}
.parent:hover .line2{
    display: inline;
}

和 HTML：

<div class="parent">
    <div class="line1">some content</div>
    <div class="line2">some more content</div>
</div>

推荐阅读