个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
这不是一个真正的学术问题。它是在工作期间出现的。我只是把它归结为一个简单的问题。
我把一个 div 放在另一个里面。我希望内部 div 具有外部 div 的宽度。最初，就是这样。
然后，如果我在外部 div 中放置一堆文本，使其比视口(viewport)宽，告诉外部 div 不要换行文本，并告诉外部 div 滚动，情况就会改变。
内部 div 占据视口(viewport)的宽度。你可以来回滚动外层的div，看到外层的div是文本的宽度，而内层的div是视口(viewport)的宽度。
这是怎么回事？我会说内部 div 占用外部 div 的宽度，句号。
https://plnkr.co/edit/XaysEo?p=preview
<body>
<my-app>
loading...
</my-app>
<div>
This is after the angular part.
</div>
<div id="outerDiv" style="background-color:blue;white-space:nowrap;overflow-x:scroll;">
This is a bunch of text. It is here to make the outer box wider than the viewport. Today, Bette and I had lunch at Outback. Outback's steak was good.
<div id="innerDiv" style="background-color:red;">
Just some text to make it appear.
</div>
</div>
<div>
</div>
<div id="outerDivWidth">
Hello?
</div>
<div id="innerDivWidth">
Hello?
</div>
<script>
let od = document.getElementById('outerDiv');
console.log(od);
let ow = od.offsetWidth;
console.log(ow);
let odw = document.getElementById('outerDivWidth')
odw.textContent = ow;
let id = document.getElementById('innerDiv');
let iw = id.offsetWidth;
let idw = document.getElementById('innerDivWidth')
idw.textContent = iw;
</script>
</body>
最佳答案
我将根据我对浏览器如何处理和渲染 block 级元素的理解来逐步解释。
block 级元素的宽度 Ref
<div> 的宽度，默认情况下是 block 级元素，将等于其父级生成的包含 block 的计算宽度。
这意味着 #innerDiv将拉伸(stretch)以匹配 #outerDiv 的计算宽度 , 和 #outerDiv将拉伸(stretch)以匹配 <body> 的计算宽度 .在您的情况下，这意味着它们或多或少等于视口(viewport)宽度。
匿名 block 框 Ref
当一个 block 容器盒(如 #outerDiv)包含另一个 block 级盒(#innerDiv)时，它将被强制包含仅 block 级盒。
在你的情况下，你也有文本在 #outerDiv 中, 但在外面 #innerDiv .此文本将被呈现为就好像它是一个匿名 block 级框 的内容一样。就像你的第一行文字被包裹在一个不可见的 <div> 中一样.
抑制换行符
正在申请 white-space:nowrap至 #outerDiv将防止匿名 block 级框 内的文本断成第二行。它的内容将忽略其父元素的右边距，并最终流过 #outerDiv 的右边缘。 .结合overflow-x:scroll这将强制执行水平滚动条。
结果
如您所描述； “内部 div 占用视口(viewport)的宽度。您可以来回滚动外部 div。这是怎么回事？我会说内部 div 占用外部 div 的宽度，句号”
你是对的 #innerDiv实际上有 #outerDiv 的宽度.而作为 #outerDiv 的宽度取决于它的父级，它不会受到其中匿名 block 级框宽度的影响。
可以说，我们所看到的更像是一种错觉。它实际上是匿名 block 框 和#innerDiv在 #outerDiv 生成的 block 容器内滚动.
如果您将背景图像应用于 #outerDiv，这将变得可见.滚动时，您会看到背景图片保持不变:
// You'll see .outer and .inner have equal widths
let o = document.querySelector('.outer'),
i = o.querySelector('.inner');
console.log(o.clientWidth, i.clientWidth);body {
/*Only for this test*/
max-width: 500px;
}
.outer {
background-color: blue;
white-space: nowrap;
overflow-x: scroll;
background: url(https://www.google.com/logos/doodles/2017/kenya-independence-day-2017-5686012280832000-2x.png) 50% 50%;
}
.inner {
display: block;
background-color: red;
}<div class="outer">
This is a bunch of text. It is here to make the outer box wider than the viewport. Today, Bette and I had lunch at Outback. Outback's steak was good.
<div class="inner">
Just some text to make it appear.
</div>
</div>网格来拯救？
如果您正在寻找解决方案，其他答案中已经提出了几种方法。另一种方法是申请 display:grid至 #outerDiv .我仍然不太熟悉 CSS 网格，但我的理解是这将强制执行 #innerDiv以匹配 #outerDiv 其余内容的宽度.这可能不适用于所有情况，但它会呈现更像您描述的预期结果。
注意控制台中的元素宽度，其中 .inner比 .outer 宽.
// You'll see .inner is wider than .outer
let o = document.querySelector('.outer'),
i = o.querySelector('.inner');
console.log(o.clientWidth, i.clientWidth);body {
/*Only for this test*/
max-width: 500px;
}
.outer {
display: grid;
background-color: blue;
white-space: nowrap;
overflow-x: scroll;
}
.inner {
display: block;
background-color: red;
}<div class="outer">
This is a bunch of text. It is here to make the outer box wider than the viewport. Today, Bette and I had lunch at Outback. Outback's steak was good.
<div class="inner">
Just some text to make it appear.
</div>
</div>关于html - 为什么内箱没有扩展到外箱的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47754521/
24
4
0
我试图弄清楚如何为聊天气泡制作外 Angular 圆形设计，以获得所需的结果: 我必须使用气泡作为不同背景的组件，没有相同和纯色，但有一些设计元素，所以气泡周围的空间必须是透明的: 我试过将元素添加为
我尝试了 display:table-cell 但它没有用。我怎样才能在div中显示这个词。现在它显示溢出了 div。我在我的网页上使用 CSS2。提前致谢。 Visit W3Schools
我有一个使用 CSS 隐藏在 View (对于移动设备)之外的菜单: #filter-column { position:absolute; left:-400px; } 当用户单击链
我想创建一个这样的问题行 http://imageshack.us/photo/my-images/200/questionh.png/ 此时我的html源是: question label
我要mock a class with Ruby . 如何编写处理样板代码的方法？ 以下代码: module Mailgun end module Acani def self.mock_mail
请不要担心循环，但我的问题是关于这些关键字:outer、middle 和 inner。它们不是声明为实例变量，为什么IDE让代码编译？我在谷歌上搜索了一下，这是java标签吗？ Java中的某种关键字
我有一个数据框(df)，看起来像， Id Name Activity. 1 ABC a;sldkj kkkdk 2 two
Elasticsearch内存中有哪些东西可以使搜索如此快速？ 是所有json本身都在内存中，还是仅倒排索引和映射将在内存中24 * 7？ 最佳答案 这是一个很好的问题，然后简而言之就是: 不仅仅是数
我正在尝试添加用户在用户界面上选择的值。对于数据库中的特定列，我已经与数据库建立了连接，当我按“保存”时，新的 id 会添加到数据库中，控制台中不会显示任何错误，但我要提交的值不会放入数据库，我怎样才
我不确定这个问题是否应该涉及电子领域，但由于它是关于编程的，所以我在这里问了它。 我正在制作一个数字时钟，使用由移位寄存器供电的 LED，而不是 7 段显示器。无论如何，当使用 CCS 编译代码时，我
我希望用户在 div 中选择文本 (html)。然而，这样做会在浏览器中显示选择背景，也在 div 之外。 我可以用(参见 http://jsfiddle.net/lborgman/aWbgT/)来防
我有以下 Razor View @{ ViewBag.Title = "UserCost"; }
我使用 KineticJS 和 D3.js 制作了以下内容。当用户将鼠标悬停在其中一个点上时，我使用 KineticJS 让我弹出工具提示。但是，由于 Canvas 的边界，工具提示似乎被切断了。有没
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 2 年前。 Improve this qu
我正在使用 primefaces 学习 Java Web 和 jsf。 我的项目当前只有一个index.xhtml 文件，当我访问localhost:8080/appname/时，index.xhtm
我是 ios 新手。 我有一个 View ，其中我使用 Quarts 核心绘制了一个圆圈。 我在该圆圈中放置了一个 UIButton，并赋予了拖放该按钮的功能。 现在我想要限制按钮不能被拖出那个圆圈区
这个问题已经有答案了: How to add two strings as if they were numbers? [duplicate] (20 个回答) How to force JS to
我正在创建简单的文本从右侧滑动到页面的 css 动画。我正在使用 jQuery 通过向元素添加一个类来触发动画。但是起始位置必须在视口(viewport)之外，这会触发底部滚动条出现。如何预防？ 这是
我编写了一个简单的代码来评估一段代码并将输出写入文件。这样它减少了我的一些，因为我需要很多很多文件，每一行都包含返回值! 无论如何，我正在使用的代码是: #!/usr/bin/ruby -w def
所以我试图在我的一款游戏中加入一个非常基本的“手电筒”式的东西。 我让它工作的方式是在我的游戏屏幕顶部有一个层，这个层会绘制一个黑色矩形，不透明度约为 80%，在我的游戏场景顶部创建黑暗的外观。 cc
我是一名优秀的程序员,十分优秀！