html - css 停止 div 扩展到整个屏幕

Question

你好，我正在做一个大学元素，我正在尝试让容器 div 不扩展到整个页面，这样我就可以将它居中，正如你在下面的图片中看到的那样，大纲正在扩展到整个页面，我不知道想要它做

这是代码

<div class = "LivingHolder">
                <a href="https://www.guildwars2.com/en/the-game/releases/january-2013/" class = "livingImage">
                    <img src="Images/livingworld/ep1.jpg">
                </a>    
                <div class = "livingdate">
                    <p>Episode 1</p>
                    <p>Flame and frost prelude</p>
                    <p>January,2013</p>
                </div>
                <div class="livingcaption">
                    <p>The sky falls and the ground shakes in the lands 
                    of the north. Charr and norn refugees crawl from the wreckage of their homes
                    in the Wayfarer Foothills and Diessa Plateau, struggling to find shelter in 
                    the south. The call goes out for volunteers to assist the victims in this time 
                    of need, when earth and sky seem to have become the enemy…</p>
                </div>
            </div>

    LivingHolder{
    border:3px solid #989898;
    overflow: hidden;
}
.livingImage{
    width:20%;
    height:20%;
    float:left;
}
.livingdate{
    text-align: left;
    background-color:yellow;
    float:left;
    margin-top:2.5%;
}
.livingcaption{
    width:50%;
    background-color:red;
    float:left;
    text-align: left;
}

Answer 1

设置容器元素的宽度，同时考虑到所包含元素的宽度。问题是，这样做会影响包含的元素，因为您已经给了它们百分比宽度(取决于父级)，因此通过将容器 div 的宽度减小到未达到边缘的宽度可能会影响内容。所以可能值得增加所包含元素的宽度，所以可能值得尝试这样的事情:

.LivingHolder{
    width: 900px;
    border:3px solid #989898;
    overflow: hidden;
    margin: auto;
}
.livingImage{
    width:35%;
    height:35%;
    float:left;
}
.livingdate{
    text-align: left;
    background-color:yellow;
    float:left;
    margin-top:2.5%;
}
.livingcaption{
    width:65%;
    background-color:red;
    float:left;
    text-align: left;
}

但是，这将耗尽父 div 内的所有剩余空间，因此如果您想在同一行添加其他内容，则需要更改宽度以适应额外的子元素。将 .LivingHolder 中的宽度更改为您想要的宽度