Question

我创建了一个文本页面并将其嵌套在容器div中。一切都很好，直到我添加了几个标有'left-column和'right-column'的div。现在，文本不再像我预期的那样嵌套在容器div中，而是显示在底部，低于应该包含的div。

我尝试将div更改为span，但同样的事情不断发生。我查看了代码，从我可以告诉的所有内容中，这些部分应该是嵌套的，但它们不是。

代码：

index.html.erb

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

default.css

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

我知道这不是MCV，但由于我目前无法找到问题的根源，我只是包含了一些看起来可能相关的内容。同样，如果可能的话，我希望所有文本都嵌套在.container div中。可能是简单的我直接看过去了吗？谢谢:)。

Answer 1

从看起来像你的代码，看起来这是一个css浮动问题，而不是与rails直接相关。左手和右手浮动在未展开的容器div中，您会遇到定位问题。最快的解决方案是在容器div中包含一个clear：

以下是我如何格式化html以解决问题的示例。

＆＃13;

<style>
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;
}
div.left-column {
  float: left;
  width: 45%;
}
div.right-column {
  float: right;
  width: 45%;
}
div.position_fix {
  clear:both;
}
</style>

＆＃13;

<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>

  <div 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> 

   </div>

   <div 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>

  </div>
  <div class="position_fix"></div>
</div>

＆＃13;

注意，明确：两者都在＆＃39; position_fix＆＃39; div正好位于容器的末端。

Answer 2

"clearfix"解决了floating elements不会影响父元素高度的问题，有更好的{{3}}解决方案。

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  border: 1px gray dotted;
}

.left, .right {
  width: 49%;
} 

.left {
  background-color: red;
  height: 200px;
  float: left;
}

.right {
  background-color: blue;
  height: 150px;
  float: right;
}

<div class="container clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

这个纯CSS解决方案使用psuedo元素来强制新的渲染上下文 - 这使得元素在子元素之后调整其高度。使用一堆空的<div>标签乱丢你的标记已经过时多年了。

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

2 个答案: