html - 内容取决于另一个 <div> 下 <div> 的宽度

Question

您好，我是 HTML 和 CSS 新手。我想让 div 宽度取决于其中内容的大小，并且它们必须显示在彼此下方。我尝试使用 display: inline-block，但这会使描述移动到标题。如果我不使用 display: inline-block，则 div 的宽度不正确。如果我将其设置为 auto，则 div 的宽度将变为 bottom_part 的宽度。

<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;
}

有谁知道我如何才能按预期显示它？

Answer 1

将 Description div 放入另一个 div 中，并设置两个 Header 的 display code> 和 Description div 到 inline-block

.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;
display: inline-block;
}

.bottom_text1 h4 {
margin: 0;
}

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

<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>
        <div class="bottom_text2">
            <p1>Description</p1>
        </div>
      </div>
    </div>
</div>
</div>