Html 与含量相关的<；部门>；在另一个<；部门>；

您好，我是HTML和CSS新手。我想使

div

的宽度取决于其中内容的大小，并且它们必须显示在彼此下面。我试图使用

display:inline block

，但这会使描述移到标题。如果不使用

display:inline块

，则

div的宽度不正确。如果我将其设置为自动，则
div
的宽度将变为
bottom\u部分的宽度

<div class="slider_test">
    <div class="slide_test">
        <a class="slide_img_link" href="http://google.com">
            <img src="cat.png" class="slide_img">
        </a>
        <div class="bottom_part">
            <div class="bottom_text1">
                <h4>Header</h4>
            </div>
            <div class="bottom_text2">
                <p1>Description</p1>
            </div>
        </div>
    </div>
</div>

.slider_test {
    width: 600px;
    height: 300px;
}

.slide_test {
    position: relative;
    height: 100%
}

.slide_img_link {
    position: absolute;
    width: 100%;
    height: 100%;
}

.slide_img {
    height: 100%;
    width: 100%;
}

.bottom_part {
    position: absolute;
    height: 50%;
    width: 50%;
    bottom: 0;
}

.bottom_text1 {
    background-color: red;
    vertical-align: top;
    width: auto;
    bottom: 0;
}

.bottom_text1 h4 {
    margin: 0;
}

.bottom_text2 {
    background-color: aqua;
    vertical-align: top;
    width: auto;
    bottom: 0;
}


标题
描述
.滑球试验{
宽度：600px；
高度：300px；
}
.滑盖试验{
位置：相对位置；
身高：100%
}
.滑动链接{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.幻灯片{
身高：100%；
宽度：100%；
}
.下半部分{
位置：绝对位置；
身高：50%；
宽度：50%；
底部：0；
}
.bottom_text1{
背景色：红色；
垂直对齐：顶部；
宽度：自动；
底部：0；
}
.bottom_text1 h4{
保证金：0；
}
.bottom_text2{
背景色：浅绿色；
垂直对齐：顶部；
宽度：自动；
底部：0；
}

有人知道我如何按预期显示此内容吗？
使用
float
-元素将充当
内联
。和
clear:both
清除两侧任何元素的行


.slider\u测试{
宽度：600px；
高度：300px；
}
.滑盖试验{
位置：相对位置；
身高：100%
}
.滑动链接{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.幻灯片{
身高：100%；
宽度：100%；
}
.下半部分{
位置：绝对位置；
身高：50%；
宽度：50%；
底部：0；
}
.bottom_text1{
背景色：红色；
垂直对齐：顶部；
宽度：自动；
底部：0；
浮动：左；
明确：两者皆有；
}
.bottom_text1 h4{
保证金：0；
}
.bottom_text2{
背景色：浅绿色；
垂直对齐：顶部；
宽度：自动；
底部：0；
浮动：左；
明确：两者皆有；
}

标题
描述
将
说明
div
放在另一个
div
中，并将
标题
和
说明
的
显示
设置为
内联块


.slider\u测试{
宽度：600px；
高度：300px；
}
.滑盖试验{
位置：相对位置；
身高：100%
}
.滑动链接{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.幻灯片{
身高：100%；
宽度：100%；
}
.下半部分{
位置：绝对位置；
身高：50%；
宽度：50%；
底部：0；
}
.bottom_text1{
背景色：红色；
垂直对齐：顶部；
宽度：自动；
底部：0；
显示：内联块；
}
.bottom_text1 h4{
保证金：0；
}
.bottom_text2{
背景色：浅绿色；
垂直对齐：顶部；
宽度：自动；
底部：0；
显示：内联块；
}

标题
描述
移除宽度，并在底部添加一个弯曲部分

.bottom_part {
    position: absolute;
    height: 50%;
    bottom: 0;
    display: flex; 
    flex-direction: column;
    align-items: flex-start;
}

@当我使用这个时，我有正确的宽度，但它们显示在一行中。但是我需要它们在彼此下面。使用
清除：两者与float一起使用，应该可以解决问题