主页 / 问题 / 806651
Accepted
Telion
Asked:2020-03-29 22:51:24 +0000 UTC2020-03-29 22:51:24 +0000 UTC

超出父级的块

  • 772

总的来说，一切似乎都很简单。有一个父级，它的宽度是800px。它有一个父级，它的宽度是父级的150%宽度，所以它超出了它。在您缩小浏览器窗口之前，一切正常。正因为如此，margin-left: 25%块在左边被正确地切断离开窗口，但在右边它有一个不对称的部分。所以它可以通过添加overflow:hidden到宽度为 的父级来修复100%，但是如果你进一步缩小它，这将不起作用，因为问题是，也没有滚动主要内容。

我在 JSFiddle 上创建了一个示例，因为您可以在那里使用视口的大小。尝试增加和缩小它，然后尝试添加overflow:hidden到.body.

https://jsfiddle.net/m6op1dwt/11/

我认为仍有可能不清楚，我会回答所有问题。感谢您的关注。

html

1 个回答

  1. Best Answer

    最好避免子元素大于父元素的情况。但情况不同。这是一种绝对定位的方法：

    *{
  box-sizing:border-box;
}
body{
  margin:0;
}
.container{
  padding-top:50px;
  max-width:800px;
  margin:auto;
  position:relative;
}
.progress{
  border:1px solid;
  width:150%;   
  max-width:100vw; /*Ограничиваем ширину прогресс-бара шириной экрана*/
  height:30px;
  background-color:#ddd;
  position:absolute;
  top:10px;  
  left:50%; /*смещаем прогресс-бар влево на 50% ширины родителя*/
  transform:translateX(-50%); /*смещаем прогресс-бар вправо на 50% своей ширины, тем самым центрируя его относительно родителя*/
}
.progress__bar{
  width:50%;
  height:100%;
  background-color:#cda;
}
    <div class="container">
  <div class="progress">
    <div class="progress__bar"></div>
  </div>
  <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>
</div>

    更改标记的选项（我认为更正确）

    *{
  box-sizing:border-box;
}
.progress{
  max-width:1600px;
  margin:0 auto 10px;
  height:30px;
  background-color:#ddd;
  border:1px solid;
}
.progress__bar{
  height:100%;
  width:50%;
  background-color:#cda;
}
.container{
  max-width:800px;
  margin:auto;
}
    <div class="progress">
  <div class="progress__bar"></div>
</div>
<div class="container">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</div>

    • 1

相关问题