Question

您好，我是HTML和CSS新手。我想使div宽度取决于其中内容的大小，并且它们必须在彼此之下显示。我尝试使用display: inline-block，但这会使描述移至标题。如果我不使用display: inline-block，则div的宽度不正确。如果我将其设置为自动，则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内，并将display和Header Description的{{1}}设置为{ {1}}

＆＃13;

div

＆＃13;

inline-block

＆＃13;

Answer 2

使用float - 该元素将充当inline。并clear:both清除双方任何元素的行。

＆＃13;

.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;
  float: left;
  clear: both;
}

.bottom_text1 h4 {
    margin: 0;
}

.bottom_text2 {
    background-color: aqua;
    vertical-align: top;
    width: auto;
    bottom: 0;
  float: left;
  clear: both;
}

＆＃13;

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

＆＃13;

Answer 3

删除宽度并在.bottom-part

上添加flex

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

内容依赖于另一个<div>下的<div>的宽度

3 个答案: