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

Question

我正在制作水平滚动网站。我有一个封面背景，然后是黑色的 div 和列中的文本，最后，我想在前一个 div.[=18= 的右边有一个绿色的 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>

CSS如下：

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; }

您可以在这个 JSFiddle 中看到演示：http://jsfiddle.net/kz5ch49w/47/

我认为问题出在 #text 的 width 上。因为我的网站是动态的，所以我无法准确定义它。然后，绿色 div #theend 出现在左下方，而不是出现在带有列的黑色 div 右侧。

如何解决这个问题？

Answer 1

只需将此添加到您的 CSS:

#cover, #text, #theend {
    display: inline-block;
}

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

Answer 2

首先 - 位置覆盖在内容之上，因为它们都是绝对的。
将#theend 改为向右浮动
最后尝试 change/remove -moz-column-width: 300px;和 webkit-column 。我删除了它，它看起来不错。

这有助于获得右侧的绿色 div 和静态背景，但我仍然看不到显示的文本。如果我找到方法，会通知您。

Answer 3

您可以将第三个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";

我分叉了你的fiddlehere

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

How to display a div next to another div with no width defined?

html

css

width