Html 如何在未定义宽度的另一个div旁边显示一个div？_Html_Css_Width

Html 如何在未定义宽度的另一个div旁边显示一个div？

html css

Html 如何在未定义宽度的另一个div旁边显示一个div？,html,css,width,Html,Css,Width,我在一个水平滚动的网站上工作。我有一个封面背景，然后是一个黑色的div，列中有文本，最后，我想在上一个div的右边有一个绿色div 我的页面结构如下： <body> <div id="content"> <div id="post-content"> <div id="cover"></div> <div id="text"></div> &

我在一个水平滚动的网站上工作。我有一个封面背景，然后是一个黑色的div，列中有文本，最后，我想在上一个div的右边有一个绿色div

我的页面结构如下：

<body>
<div id="content">
  <div id="post-content">
    <div id="cover"></div>
    <div id="text"><!-- columns --></div>
    <div id="theend"><p>THE END</p></div>
  </div>
</div>
</body>

body { margin:0; padding:0; background:black; }
#content { position:absolute; height:100%; top:0; left:0; }
#post-content { position:relative; background:transparent; overflow-x: scroll; overflow-y: auto; height: 100%; top:0; left:0; }
#cover { left:0; top:0; position:absolute; height:100%; width:100%; background: url('http://www.inveralmondchs.org/wp-content/uploads/2014/02/waterfall-godafoss-iceland.jpg') center no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: scroll; }
#text { float:left; width: auto; height:100%; left:100%; position: relative; box-sizing: border-box; padding:0px; margin:0px; font-size:15px; text-align: left; color:white; font-family:'open sans'; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-width: 300px; -moz-column-gap: 40px; -moz-column-count: auto; column-width: 300px; column-gap: 40px; }
#theend { float:left; height:100%; position: relative; width:300px; text-align:center; background: green; color:white; }

您可以在这个JSFIDLE中看到演示：

我认为问题在于

文本的宽度。因为我的网站是动态的，所以我不能精确地定义它。然后，绿色div#end
显示在左下角，而不是带列的黑色div的右侧
如何解决此问题？
只需将此添加到CSS中：
#cover, #text, #theend {
    display: inline-block;
}

然后在所有三个最里面的div中放置一些可显示的文本，以测试排列。

首先关闭位置覆盖在内容上方，因为它们都是绝对的
将“结束”改为向右浮动
最后尝试更改/删除-moz列宽：300px；和webkit专栏。我把它拆了，看起来不错

这有助于获得右侧的绿色div和背景静态，但我仍然看不到显示的文本。如果我找到了方法，会通知您。
您可以将第三个div的位置设置为绝对位置：
#theend { float:left; height:100%; position: absolute; top:0; left: 0; width:300px; text-align:center; background: green; color:white; }

然后通过Javascript设置位置：
var w1 = document.getElementById("cover").scrollWidth + document.getElementById("text").scrollWidth; document.getElementById("theend").style.left = w1 + "px";

我用叉子叉了你的小提琴
谢谢你的回答，但正如你在这里看到的，它仍然不起作用……试试真正的浏览器。另一种解决方法是将3个内部DIV替换为span，并将span的显示设置为block，但这样会破坏您的DIV安排。谢谢您的回答。我不确定是否理解了你的建议。这是一个新的演示：（封面已经不见了，没有专栏了，等等…）你能在浏览器上试用一下吗。它们的工作方式不同。我在演示中更新了div的位置。你是说你更新的这个版本吗？jsfiddle.net/kz5ch49w/49/无论如何，我放入了一个真正的HTML页面：。但是我再也没有封面和专栏了（绿色的div在底部）。