为什么这个html/css/rails模板没有正确嵌套？

我已经创建了一页文本并将其嵌套在一个容器div中。在我添加了两个标记为“left column”和“right column”的div之前，一切都很好。现在，文本不再像我预期的那样嵌套在container div中，而是显示在底部，即应该包含的div下面

我试着将div改为span，但同样的事情不断发生。我查看了代码，从我所能知道的一切来看，这些部分应该是嵌套的，但它们不是

守则：

index.html.erb

---

我知道这不是很MCV，但因为我目前无法找到问题的根源，所以我已经包括了所有看起来可能相关的内容。同样，如果poss，我希望所有文本都嵌套在.container div中。也许是简单的事情，我正看着过去？谢谢：）。

从代码的外观来看，这似乎是一个css浮动问题，与rails没有直接关系。由于您的左浮动和右浮动在未浮动容器div中，因此您的定位有问题。最快的解决方案是在container div中包含一个clear:tware

下面是一个我如何格式化html来解决这个问题的示例

分区集装箱{
左侧填充：25px；
右边填充：25px；
垫底：25px；
边框：10px纯黑；
背景色：#CB0E0E；
}
a{
颜色：浅灰色；
}
p{
字体系列：Arial；
}
div.left-column{
浮动：左；
宽度：45%；
}
右列分区{
浮动：对；
宽度：45%；
}
分区位置固定{
明确：两者皆有；
}

狂热/诗歌
关于或关于艾莉莎·埃萨奇·舍甫琴科的狂热和诗歌
无论您为我们使用的是哪种联系方式，还是您发送给我们的任何电子邮件，请尊重我们！一些性内容当然，我们都是人，出版会根据具体情况考虑，但不会有任何恶心或恶心！或者特别是，没有什么有害的。我们不会把它挂起来，所以发送它没有意义。到目前为止，在我寄出的作品中，对话的总体质量和水平与预期完全不符——只有两部作品在语调和质量上接近标准，其中一部需要大量的清理和编辑。所以提高标准！非常感谢。
诗
艾丽莎·舍甫琴科用AnonHacker3侵入了我的电脑
昨晚我黑了你的电脑。

嗯，当我说“我”时，我实际上是指你，

但我在假装另一种方式

因为它混淆了安全协议。

起初，您是在用C++编写函数

我想，这确实很有趣

看到一个如此明显天真的人

仍然认为他们会成为

某种密探或什么的

在《卫报》的封面上，

或者福布斯杂志。但无论如何，

我很确定你不应该这样做

注册alisesage.com

作为域名，如果您不愿意

从一个女孩身上带走一点热量

跳转到你的Ubuntu核心

通过一个鲜为人知但广为宣传的渠道

单内核函数挂钩，

给你留言，因为你是

因为一些他妈的荒谬的原因

用他妈的

RubyonRails版本4

就像他妈的，所以我写了

命令行上的“nuhuh”

基本上就让你去做了

我打赌艾丽莎·舍甫琴科的嘴被海盗长颈鹿咬得很好吃
昨晚我在看《银翼杀手》

以及壳中的幽灵，

这让我想起了热辣的间谍

用机器人身体攻击电脑。

所以我想去碰阿莉莎·舍甫琴科

在她嘴里，用我的手指，

感觉如何

在她体内

当她四处走动时

她想怎么慢就怎么慢

在我的手指上，她将如何品尝…

当我把手指放进自己的嘴里后。

时间线灰蜥蜴564
想到你躺在床上

你的身体稍微有点过桥了

朝着你背部的小部分

在你颤抖的乳房柔软的尖端

问题：这是我的吗

触摸，此时

已得到答复

在积极的未来时间表中

我就躺在上面

我舌头的感觉挥之不去

此时，可能性最大。

粉飞客
艾丽莎·舍甫琴科的奇案：福尔摩斯与艾斯的交叉
“我从来没有隐瞒过我对福克斯的厌恶，”夏洛克带着一种复杂的微笑说

“你到底在说什么福尔摩斯？”华生粗俗地说

“我说的是福克斯，华生，”夏洛克撒谎，“引用的是海明威的话。虽然是鬼写的，但我相信。”

“哦，”华生说。“那么我想这可能是一个很好的引语。”

“哦，当然，”福尔摩斯说。“这确实是一句很好的引语，是英语中最好的引语之一。”

福尔摩斯把烟斗里的东西敲到手里，然后把烟灰倒进沃森朝上的手掌里。沃森惊恐地看着他。福尔摩斯接着说

“你是说艾莉莎·埃萨奇，”沃森带着一种骄傲的神情说，这只狗刚拉完便便。福尔摩斯没有理会那股气味

“现在，如果你能原谅我的话，我真的需要谈谈艾丽莎·舍甫琴科。”

“俄国间谍？”

夏洛克给了沃森一个充满爱意的鄙视的眼神

“是的，是的，不管你说什么，沃森。问题是我不能完全确定，管理她的Twitter账户的人是否真的是她了。
<div class="container">
  <h1>Fanfic/Poetry</h1>
  <h2>Fanfic and poetry about or related to Alisa Esage Shevchenko</h2>
  <h3>Whichever contact details you're using for us and whatever email you're sending to PLEASE be respectful! Some sexual content sure, we're all human beings and publication will be considered on a case by case basis, but nothing sick or gross! Or particularly, nothing harmful. We won't put it up so there's no point sending it. So far out of the works I've had sent in the general quality and level of dialogue is <em>not at all</em> close to expectations -- only two came anywhere near the mark in terms of tone and quality, and one needed extensive cleaning and editing. So <em>up</em> the standard! THANK YOU!</h3>

  <span class="left-column">

    <h2>Poetry</h2>

    <h4><strong>Alisa Shevchenko Hacked My Computer</strong> by <em>AnonHacker3</em></h4>
      <p>Last night I hacked your computer.<br>
       Well, when I said "I" I actually mean you,<br>
       but I'm pretending the other way around<br>
       because it confuses the security protocols.<br></p>
      <p>At first you were writing a function in C++<br>
       I think, and it was actually pretty fun<br>
       to see someone so obviously naive<br>
       still thinking like they're going to be<br></p>
      <p>some sort of secret agent or something<br>
       on the cover of the Guardian,<br>
       or Forbes magazine. But anyway,<br>
       I'm pretty sure you shouldn't have<br></p>
      <p>registered alisaesage.com<br>
       as a domain name if you weren't willing<br>
       to take a little heat from a girl<br>
       hopping onto your Ubuntu core<br></p>
      <p>via a little known, though much publicised<br> 
       single kernel function hook,<br>
       and leaving you a message, coz you were<br>
       for some fucking ridiculous reason<br></p>
      <p>CODING THE THING IN FUCKING<br>
       RUBY ON RAILS VERSION 4!<br>
       Like what the actual fuck, so I wrote<br>
       "nuhuh" on your command line<br></p>
      <p>and pretty much left you to it.</p>

      <h4><strong>I Bet Alisa Shevchenko's Mouth Tastes Nice</strong> by <em>A Pirate Giraffe</em></h4>

      <p>I was watching Blade Runner last night,<br>
       As well as Ghost in the Shell,<br>
       Which totally made me think of hot spies<br>
       With robot bodies hacking computers.<br>
       So I thought about touching Alisa Shevchenko<br></p>

      <p>In her *mouth*, with my fingers,<br>
       And how it feels<br>
       Inside her body<br>
       As she moves about just<br>
       As slowly as she wants to<br>
       Over my fingers, how she'll taste...<br>
       When I put my fingers in my own mouth after.<br></p>

       <h4><strong>Timelines</strong> by <em>Gray Lizard 564</em></h4>

       <p>The thought of you laying<br>
       your body bridged just a little<br>
       toward the small of your back<br>
       at the quivering soft tip of your breast<br>
       the question: is this mine<br>
       to touch, by this point<br>
       has been answered<br></p>

       <p>in the positive future timeline<br>
       where I am lain just above<br>
       the feel of my tongue lingering<br>
       at this, the point of most possibility.<br></p> 

   </span>

   <span class="right-column">

    <h2>Fanfic</h2>

    <h4><strong>The Curious Case of Alisa Shevchenko</strong>: Sherlock Holmes and AeS crossover by <em>andcarpenoctem</em></h4>

    <p>"I have never made a secret of my distaste for forks" said Sherlock, with    a complex sort of smile.</p>

    <p>"What in the hells are you talking about Holmes?" said Watson, in an uncouth way.</p>

    <p>"I'm talking about forks, Watson," Sherlock lied, "and the quote is from Hemingway. Though ghost-written, I believe."</p>

    <p>"Oh," said Watson. "Then I suppose it's probably a good quote."</p>

    <p>"Oh certainly," said Holmes. "A very good quote indeed. One of the finest in the English language."</p>

    <p>Holmes tapped out the contents of his pipe into his hand and then poured the ash into Watson's upward facing palm. Watson looked at him, aghast. Holmes continued,</p>

    <p>"You mean Alisa Esage" Watson said with a look of a proud dog who's just finished pooing. Holmes ignored the smell.</p>

    <p>"Now, if you'll excuse me I really need to talk about Alisa Shevchenko."</p>

    <p>"The Russian spy?"</p>

    <p>Sherlock gave Watson a look of loving disdain.</p>

    <p>"Yes yes, whatever you say Watson. The problem is I'm not entirely sure if the person who runs her Twitter account really is her anymore. And we need to find out where she is."</p>

     <p>"I see." replied Watson. "How will we do that? I suppose I could put out a trace on her IP address and maybe set her webcam to switch on remotely..."</p>

    <p>"Oh, no Watson." Said Holmes. "That won't work at all. We'll need to start with her grammar."</p>

    <p>"Or," continued Watson, deep in thought, "we could go onto her Instagram and cross-reference any new pictures with one of those location triangulators they have at the MET. The ones that use the image information to figure out weather, air pressure, things like that."</p>

    <p>"Nope. Because I got most of London banned from her Instragram."</p>

    <p>"How did you manage that, Holmes?"</p>

    <p>"Quite simple really, I tried to install her as head of Шалтай Болтай."</p>

    <p>"Humpty Dumpty?" said Watson, instinctively translating the Russia outloud.</p>

    <p>Holmes paused a little while to let the information sink in.</p>

    <p>"Yes, quite."</p>

    <p>"Pardon?"</p>

    <p>"I have a flight booked to Twitter HQ and we have to be there in and hour, so you're coming with me."</p> 

    <p>"Shaltai Boltai, are you certain?"</p>

    <p>"Yes."</p>

    <p>"Then I suppose I am. Coming with you, I mean. Yes, I suppose I am."</p>

  </span>
</div>

.container {
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  border: 10px solid black;
  background-color: #CB0E0E;
}
a {
  color: lightgrey;
}
p {
  font-family: Arial;
}
.left-column {
  float: left;
  width: 45%;
}
.right-column {
  float: right;
  width: 45%;
}