Question

这是我代码的当前结果。

我想做的是让灰色框区域扩展到每张图像的大小，而不管有多少文本。

这是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的高度，但是我没有如何根据图像大小动态更改此高度。还要注意的一点是，在一些较小的屏幕中，文本环绕在图像底部，因此不会出现此问题。

任何帮助将不胜感激

扩展父div以适合图像高度

0 个答案: