overmind 2024-11-07 10:37 采纳率: 86.7%
浏览 4
问题最晚将于11月15日00:00点结题

浮动div的高度控制问题。

红框区域总是白色，希望是浅绿色

img

<link rel="stylesheet" href="style.css">
<body>
<div id="wrapper">
    <div id="header"> 我是header </div>
    <div id="middle">
        <div id="sidebar">

            <div class="subject-main-container">
                <div class="subject-top-container">春</div>
                <div class="subject-bottom-container">
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                </div>
            </div>
            <div class="subject-main-container">
                <div class="subject-top-container">夏</div>
                <div class="subject-bottom-container">
                    <div>5</div>
                    <div>6</div>
                    <div>7</div>
                </div>
            </div>
            <div class="subject-main-container">
                <div class="subject-top-container">秋</div>
                <div class="subject-bottom-container">
                    <div>8</div>
                    <div>9</div>
                    <div>10</div>
                </div>
            </div>
            <div class="subject-main-container">
                <div class="subject-top-container">冬</div>
                <div class="subject-bottom-container">
                    <div>11</div>
                    <div>12</div>
                    <div>1</div>
                </div>
            </div>

        </div>
        <div id="content"> 

            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
        </div>
    </div>
    <div id="footer">我是 footer</div>
</div>
</body>


body{
    margin:0;
}
div#wrapper{
    margin:0 auto;
    width:1000px;
    background:lightgreen;
}
div#header{
    height:120px;
    width:1000px;
    background:lightblue;
}
div#middle{
}
div#sidebar{
    width:240px;
    float:left;
    background:lightgreen;
}
div#content{
    width:760px;
    float:left;
    background:cyan;
}
div#footer{
    height:100px;
    width:1000px;
    float:left;
    background:lightblue;
}

.subject-main-container {
  width: 240px;
}

.subject-top-container {
  background-color: darkgreen;
  width: 240px;
  height: 70px;
  border-radius: 150px;
  text-align:center;
  color:white;
  font-size:60px;
}

.subject-bottom-container {
  background-color: lightgreen;
  width: 240px;
  margin-left:20px;
  margin-top:-5px;
  padding:20px 10px;
}

.subject-bottom-container div{
  font-size:22px;    
  line-height:30px
}
div.subject-main-container .subject-bottom-container{
    display:none;
}

div.subject-main-container:hover .subject-bottom-container{
    display:block;
}

.container {
    width: 150px;
    height: 210px;
    text-align: left;
    float:left;
    margin-left:15px;
}

.image {
    width: 150px;
    height: 150px;
    border-radius: 10px;
    background:black;      
}

.author {
    font-weight: bold;
    font-size:25px;
}

.date {
    font-size: 16px;
    color:grey;
}
  • 写回答

13条回答 默认 最新

  • 专家-皆知 2024-11-07 10:38
    关注

    以下回复引自免费微信小程序：皆我百晓生。 如问题解决，还请采纳。如仍有疑问，请回复留言或私信博主，以便获得更精准的帮助。

    在CSS中，你可以使用POSITION: ABSOLUTE;来设置浮动元素的绝对定位，并通过HEIGHT属性调整其高度。然而，在HTML中，我们通常不会直接修改元素的样式，而是使用CSS来实现这一功能。如果你想要改变浮动元素的高度，可以考虑以下几种方法：

    1. 使用CSS伪类：例如，你可以将一个具有特定宽度和高度的元素添加到父容器中，然后使用POSITION: RELATIVE;或POSITION: ABSOLUTE;将其移动到指定的位置，从而达到改变元素高度的目的。

    2. 使用JAVASCRIPT：如果允许，你还可以使用JAVASCRIPT来动态地调整元素的大小和位置。这可以通过创建一个简单的动画或事件监听器来实现。但是，这种方式可能需要对DOM操作有一定的了解。

    3. 使用媒体查询：对于较小的屏幕尺寸，你可以为浮动元素设置不同的样式，这样即使是在小屏幕上，元素也能保持清晰可见。

    4. 使用过渡效果：当元素的高度发生变化时，可以使用CSS过渡效果（如TRANSFORM: TRANSLATEY(50PX)）来模拟这个变化。

    具体如何实现这些方法取决于你的项目需求。

    评论

报告相同问题？

问题事件

  • 创建了问题 今天

悬赏问题

  • ¥15 (标签-matlab)
  • ¥15 Marscode IDE 如何预览新建的 HTML 文件
  • ¥15 K8S部署二进制集群过程中calico一直报错
  • ¥15 java python或者任何一种编程语言复刻一个网页
  • ¥20 如何通过代码传输视频到亚马逊平台
  • ¥15 php查询mysql数据库并显示至下拉列表中
  • ¥15 freertos下使用外部中断失效
  • ¥15 输入的char字符转为int类型，不是对应的ascall码，如何才能使之转换为对应ascall码？或者使输入的char字符可以正常与其他字符比较?
  • ¥15 devserver配置完 启动服务 无法访问static上的资源
  • ¥15 解决websocket跟c#客户端通信