Html 未指定宽度的 div（绝对定位）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7337056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div with unspecified width (absolute positioning)
提问by Ray
I've got an absolutely positioned div I'm working with, and I put some text inside of it just to be able to find it on the page, namely:
我有一个绝对定位的 div 正在使用，我在其中放了一些文本，以便能够在页面上找到它，即：
<div style="position:absolute; top:10px; left:500px; font-size:30px; ">Example Text </div>
The text ends up wrapping, i.e. "Example" and "Text" are on a different line. There are no scroll bars showing in my Firefox browser, in fact it's width is about 1000px. Does one have to set a width on divs? Don't they expand to hold their content?
文本以换行结束，即“示例”和“文本”在不同的行上。我的 Firefox 浏览器中没有显示滚动条，实际上它的宽度约为 1000 像素。是否必须在 div 上设置宽度？他们不扩展以容纳他们的内容吗？
In case it helps, I included the Firebug CSS output for this element here:
如果有帮助，我在此处包含了此元素的 Firebug CSS 输出：
element.style {
font-size: 30px;
left: 500px;
position: absolute;
top: 10px;
}
html * {
margin: 0;
} // main.css (line 1)
Inherited from body:
body {
color: #333333;
font: 11px verdana,arial,helvetica,sans-serif;
}
Thanks
谢谢
采纳答案by jmar777
Block-level elements expand verticallyto hold their content, but expand horizontallyto fill their container. Since you're using absolute positioning though, the semantics of "filling the container" change a bit.
块级元素垂直扩展以容纳其内容，但水平扩展以填充其容器。由于您使用的是绝对定位，因此“填充容器”的语义会发生一些变化。
Normally browsers will attempt to fill the remaining horizontal space of the browser if the width hasn't been specified (or when width is 'auto', the default width), so what you're describing sounds peculiar. It seems most likely that something else is interfering with the element to cause that behavior (e.g., a relatively or absolutely positioned element somewhere in the parent chain).
通常，如果未指定宽度（或当宽度为“自动”，默认宽度时），浏览器将尝试填充浏览器的剩余水平空间，因此您所描述的内容听起来很奇怪。看起来很可能是其他东西干扰了元素以导致该行为（例如，父链中某处的相对或绝对定位元素）。
I would try to debug this by seeing if you can replicate the behavior with a root-level div (if you're not already), to eliminate the chance of parent elements causing issues.
我会尝试通过查看您是否可以使用根级 div（如果您还没有）复制行为来对此进行调试，以消除父元素导致问题的可能性。
回答by Spiros Martzoukos
Try adding:
尝试添加：
white-space: nowrap;
in your fixed positioned div. Beware, though, that this solution will not cause the lines to wrap when the div is smaller than the window's width.
在您的固定定位 div 中。但是请注意，当 div 小于窗口的宽度时，此解决方案不会导致行换行。
回答by Benson
On the absolutely positioned element, add:
在绝对定位的元素上，添加：
display: table;
回答by Aztek4
I have this solution for that:
我有这个解决方案：
<style>
html * {
margin: 0;
}
body {
color: #333333;
font: 11px verdana,arial,helvetica,sans-serif;
}
#a1{
position: relative;
margin:10px;
border:1px solid black;
overflow:hidden;
}
#a1 img{
max-width:700px;
}
#a2{
position: absolute;
right:5%;
bottom:5%;
border:1px solid white;
color:#fff;
font-size:2em;
background:rgba(0,0,0,0.7);
padding:10px;
}
</style>
<div id='a1'>
<img src="https://lh3.googleusercontent.com/-kx0cklvaX2A/VBgtKrx6FWI/AAAAAAAAAG4/4ZERNAeA5HI/s931-fcrop64=1,06480000ffc9ffff/pZhc7Fq5oX8.jpg" />
<div id='a2'>
<div>Your Text is flexible width</div>
<hr/>
<div>other text here</div>
</div>
</div>
http://jsfiddle.net/2hynguq9/2/
http://jsfiddle.net/2hynguq9/2/
flexible text width ajustable to the div, enjoy
灵活的文本宽度可调整到 div，享受
回答by Akexis
I figured out what my specific issue was and figured I'd mention it here to help others debug:
我弄清楚了我的具体问题是什么，并认为我会在这里提到它以帮助其他人调试：
I have two elements, a sup and a span. The sup had a negative margin. As I was doing responsive breakpoints the span wasn't really centered. I had to adjust the sup negative margin for the breakpoint.
我有两个元素，一个 sup 和一个跨度。sup 的利润为负。当我在做响应式断点时，跨度并没有真正居中。我不得不调整断点的 sup 负边距。
回答by jahooma
I solved this by adding a wrapper div that is also absolutely positioned, with the width I want my div to expand up to.
我通过添加一个绝对定位的包装 div 解决了这个问题，宽度是我希望我的 div 扩展到的。
E.g.,
例如，
<div class="wrapper">
<div class="my-div"></div>
</div>
And css,
和CSS，
.wrapper {
position: absolute;
width: 500px;
}
.my-div {
position: absolute;
whitespace: pre-wrap;
}
You can add whitespace: pre-wrap to allow wrapping lines, which makes this more flexible than the nowrap solution.
您可以添加 whitespace: pre-wrap 以允许换行，这使得它比 nowrap 解决方案更灵活。
回答by cycero
It actually works fine for me. But try adding display: inline;to the div.
它实际上对我来说很好用。但是尝试添加display: inline;到 div。
回答by Graeme Leighfield
Try using the css attribute of "width:auto" on the div :)
尝试在 div 上使用“width:auto”的 css 属性 :)
