CSS 布局 - 为什么边框和大小会这样？

发布于 2024-08-25 23:09:13 字数 1844 浏览 0 评论 0原文

我想创建一个带有标题、边框（左、右、下）以及内容的对话框。当前源代码：

<html>
<body>
<div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table">
<div style="display: table-row;">
<div style="background: #f00; width: 100%; display: table-cell;height: 24px;">top</div>
</div>
<div style="display: table-row;">
<div style="background: #0f0; width: 100%; display: table-cell;">

<div style="display: table;">
<div style="display: table-row;">

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>

<div style="display: table-cell;">
<div style="overflow: scroll; white-space: nowrap">
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />

cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
</div>
</div>

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>

</div>
</div>



</div>
</div>
<div style="display: table-row;">
<div style="background: #000; width: 100%; display: table-cell; height: 4px;"></div>
</div>

</div>
</body>
</html>

产生

alt text

左右边框发生了什么以及尺寸为何超出的输出顶部父项中指定的宽度（152px）？

原文

I want to create a dialog with a title, borders (left, right, bottom) as well as the content. The current source code:

<html>
<body>
<div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table">
<div style="display: table-row;">
<div style="background: #f00; width: 100%; display: table-cell;height: 24px;">top</div>
</div>
<div style="display: table-row;">
<div style="background: #0f0; width: 100%; display: table-cell;">

<div style="display: table;">
<div style="display: table-row;">

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>

<div style="display: table-cell;">
<div style="overflow: scroll; white-space: nowrap">
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />

cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
</div>
</div>

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>

</div>
</div>



</div>
</div>
<div style="display: table-row;">
<div style="background: #000; width: 100%; display: table-cell; height: 4px;"></div>
</div>

</div>
</body>
</html>

produces an output of

alt text

what happened to the left and the right borders and why does the size exceed the width specified in the top parent (152px)?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彻夜缠绵 2024-09-01 23:09:13

如果您要使用表格，请使用表格。设置块元素的显示来模仿各种表格元素充其量是有问题的，而且跨浏览器非常难以预测。

回复收藏 0 原文

爱她像谁 2024-09-01 23:09:13

您使用了太多内联规则，尝试使用CSS选择器、类和div的id来分隔它们，适当地使用表格。

有些规则会抵消其他规则，这就是为什么你看不到边界。

回复收藏 0 原文

自由如风 2024-09-01 23:09:13

抱歉，您的 HTML 代码是一堆可怕的标签汤，让人想起 90 年代初。

对于您的具体问题，由于您的规则 white-space: nowrap 拉伸了表格，因此宽度更大。这就是可能删除边框的原因 - 这些“单元格”中没有内容，因此它们折叠到零宽度。

就像罗布斯托说的，如果你想要一张桌子，就用一张桌子。如果您想要一个类似对话框的框，那么您绝对不需要所有这些嵌套的 div 标记。只需使用外层并使用边框规则来设置边框即可：

<div style="border:4px solid #000; border-top:0; background:#0ff; width:152px; height:112px;">
    <h2 style="background:#f00;">top</h2>
    cwe cwe cwe cwe...
</div>

Sorry but your HTML code is a horrible mess of tag soup reminiscent of the early 90s.

For your exact problem, the width is larger because of your rule white-space: nowrap which stretches the table. And this is what's likely removing the borders - there is no content in those "cells" so they collapse to a zero width.

Like Robusto said, if you want a table, use a table. If you want a dialog-like box, you definitely don't need all those nested div tags. Just have your outer one and use the border rule to set the borders:

<div style="border:4px solid #000; border-top:0; background:#0ff; width:152px; height:112px;">
    <h2 style="background:#f00;">top</h2>
    cwe cwe cwe cwe...
</div>

回复收藏 0 原文

真心难拥有 2024-09-01 23:09:13

滚动不是由大小调整引起的，而是由您强制滚动值溢出引起的。根据我的经验，将其设置为滚动会始终显示滚动条 - 尽管处于禁用状态。尝试将溢出设置为自动

<div style="overflow: auto; white-space: nowrap">

the scrolling is not caused by the sizing, its caused by you forcing the Scroll value in overflow. In my experience, setting it to scroll shows the scrollbars all the time - albeit in their disabled state. try setting the overflow to auto

<div style="overflow: auto; white-space: nowrap">

回复收藏 0 原文

陈甜 2024-09-01 23:09:13

您不必一开始就使用所有这些 div。您可以极大地简化您的 HTML：

<div>
  <h1>top</h1>
  <div>
    <p>cwe cwe cwe</p>
    <p>cwe cwe cwe</p>
  </div>
</div>

并且仍然可以轻松应用您需要的所有样式。无需为每个边框创建一个 div。这就是 CSS 属性 border-left、border-right、border-bottom 和 border-top 的作用for （这些都是由古代浏览器支持的，与 display: table 不同）。

You don't have to use all these divs to begin with. You can simplify your HTML drastically:

<div>
  <h1>top</h1>
  <div>
    <p>cwe cwe cwe</p>
    <p>cwe cwe cwe</p>
  </div>
</div>

and still easily apply all the styling you need. No need to create a div for each border. That's what the CSS attributes border-left, border-right, border-bottom and border-top are there for (and these are supported by ancient browsers, unlike display: table).

回复收藏 0 原文

~没有更多了~