时间戳

首页 > 解决方案 > 扩展父 div 以适应图像高度

html - 扩展父 div 以适应图像高度

问题描述

这是我的代码的当前结果。在此处输入图像描述

我想要做的是让灰色框区域扩展到每个图像的大小，无论有多少文本。

这是 HTML：

<body>
    <div id="content" class="content">
        <div id="title" class="title">
            Sports
        </div>
        <nav class="nav_bar">
            <ul>
                <li><a href="./index.html">Home</a></li>
                <li class="active"><a href="./sports.html">Sport</a></li>
                <li><a href="./academics.html">Academics</a></li>
                <li><a href="./others.html">Other</a></li>
                <li><a href="./stats.html">Stats</a></li>
            </ul>
        </nav>
        <div id="page_description" class="page_description">
            One of my main objectives for the first term of university was to get back my fitness. I decided to do this through going to the gym and playing futsal.
        </div>
        <div class="activity_container">
            <div class="title_hours">
                <h1>The Gym</h1>
                <h3> - 5 Hours</h3>
            </div>
            <hr class="hr_title_divider">
            <div class="description_pic">
                <div class="img_div">
                    <img src="./images/gym.jpeg"/>
                </div>
                <div class="description">
                        Lorem ipsum dolor sit amet, ac ac condimentum aliquam dui, et quam turpis mauris, scelerisque ad vivamus felis id aliquet, aenean quam et vestibulum sed lacus sit. Amet hendrerit vitae phasellus nec, enim nulla et id at enim amet. U

            </div>
        </div>
    </div>
    <hr class="hr_divider">
    <div class="activity_container">
        <div class="title_hours">
            <h1>5-a-side Football</h1>
            <h3> - 5 Hours</h3>
        </div>
        <hr class="hr_title_divider">
        <div class="description_pic">
            <div class="img_div">
                <img src="./images/5-aside.jpeg"/>
            </div>
            <div class="description">
                    Lorem ipsum dolor sit amet, ac ac condimentum aliquam dui, et quam turpis mauris, scelerisque ad vivamus felis id aliquet, aenean quam et vestibulum sed lacus sit. Amet hendrerit vitae phasellus nec, enim nulla et id at enim amet. U
            </div>
        </div>
    </div>
    <hr class="hr_divider">
    <div class="activity_container">
        <div class="title_hours">
            <h1>Futsal</h1>
            <h3> - 5 Hours</h3>
        </div>
        <hr class="hr_title_divider">
        <div class="description_pic">
            <div class="img_div">
                <img src="./images/futsal.jpeg" style="overflow: hidden;"/>
            </div>
            <div class="description">
                    Lorem ipsum dolor sit amet, ac ac condimentum aliquam dui, et quam turpis mauris, scelerisque ad vivamus felis id aliquet, aenean quam et vestibulum sed lacus sit. Amet hendrerit vitae phasellus nec, enim nulla et id at enim amet. U

            </div>
        </div>
    </div>
    <hr class="hr_divider">
</div>

这是CSS：

.page_description {
    background-color:rgba(555,555,555,0.5);
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    font-size: large;
    border-radius: 8px;
    margin-bottom: 2%;
}

.main_container {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    background-color:rgba(555,555,555,0.5);
    border-radius: 8px;
    display: flex;
}

hr {
    border-width: 2px;
}
.hr_tag {
    width:40%;
    margin-left: auto;
    margin-right: auto;
}

.hr_divider {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    height: 3px;
    color: white;
    background-color: white;
    border: none
}

.hr_title_divider {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 3px;
    color: white;
    background-color: white;
    border: none
}

.activity_container {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    background-color:rgba(555,555,555,0.5);
    border-radius: 8px;
}

.title_hours {
    width: 100%;
    text-align: center;
}

.title_hours h1{
    display: inline;
    text-decoration: underline;
}

.title_hours h3{
    display: inline;
    font-weight: normal;
}

img {
    float: right;
    display: block;
}

.description_pic {
    word-break: break-all;
    word-break: break-word;
    display: inline;
    height: 100%;
}

.description {
    font-size: 2vh;
    padding: 0% 2% 2% 2%;
    margin-right: 2%;

}

.img_div {
    padding-right: 4%;
    padding-left: 2%;
    height: auto;
}

我试过寻找解决方案，但一直没有找到。我认为问题在于我没有定义activity_container的高度，但是我不知道如何根据图像的大小动态地改变它。另一点需要注意的是，在一些较小的屏幕中，文本会环绕图像的底部，因此不会出现此问题。

任何帮助，将不胜感激

标签： htmlcss

解决方案

推荐阅读