CSS内部的100％宽度

Question

对不起，我无法正确说出我的头衔。我对我的CSS代码有疑问。我尝试将所有内容都放在JSfiddle中，但这样可行，抱歉。

我不知道如何制作div＆＃39; infoMovie＆＃39;延伸到div的末尾＆lt; displayMovie＆＃39;。

HTML：

<div class="content">
            <div class="displayMovie">
                <div class='imageCover'>
                    <img src='Endgame-movie-cover.jpg' width="100">
                </div>
                <div class='infoMovie'>
                    <div class='imageTitle' >
                        End game
                    </div>
                    <br>
                    <div class='imageDesc'>movie about everything in life lollllllllllllllllllllllllllllllllll
                    </div>
                </div>
            </div>
        </div>

和CSS：

.displayMovie {
        width: 100%;
        display: inline-block;
        border-bottom: 1px solid black;
    }

.imageCover {
    border-right: 1px solid black;
    padding: 10;
    float: left;
}

.imageDesc {
    border-top: 1px solid black;
    word-break: break-all;
}

.imageTitle {
    font-weight: bold;
    font-size: 18pt;
    margin: 5 10 5 10;
    display: inline-table;
}

.infoMovie {
    display: inline-block;
}

所以基本上我想将infoMovie扩展到displayMovie剩余部分的100％。

网页外观的图片：

我想更改“这是一部包含大量动作的电影”。直到页面结尾

Answer 1

.infoMovie {
display: inline-block;
}

表示.infoMovie div不会比其中包含的内容更宽。

您可以删除此样式声明。

您希望.infoMovie展示div元素的正常块级行为。

作为块级元素（<div>），它将自然地扩展到其父级的宽度。