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

首先，LivingHolder规则缺少初始.。它应该是.LivingHolder

现在，为此元素设置宽度并提供margin:0 auto将限制宽度并使其居中。

.LivingHolder{
    border:3px solid #989898;
    overflow: hidden;

    width:800px; /*add the width you want here*/
    margin:0 auto;
}

评论后

更新

如果您还希望内部部分的高度相等，则应移除浮动并使用弹性框。

＆＃13;

.LivingHolder {
  border: 3px solid #989898;
  width: 800px;
  margin: 0 auto;
  display:flex;
}

.livingImage {
  width: 20%;
  height: 20%;
}
.livingImage img{max-width:100%;display:block;}
.livingdate {
  text-align: left;
  background-color: yellow;
  margin-top: 2.5%;
  max-width:30%;
}

.livingcaption {
  width: 50%;
  background-color: red;
  text-align: left;
}

＆＃13;

<div class="LivingHolder">
  <a href="https://www.guildwars2.com/en/the-game/releases/january-2013/" class="livingImage">
    <img src="http://lorempixel.com/400/400/abstract/1">
  </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>

＆＃13;

Answer 2

设置容器元素的宽度，同时考虑所包含元素的宽度。但问题是，通过这样做会影响所包含的元素，因为你已经给它们百分比宽度（这取决于父元素）所以通过将容器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中的宽度更改为您想要的宽度

css停止div扩展到整个屏幕

2 个答案: