css - block 是流动的，但文本不会调整大小

Question

我有两个 div，.left和 .right在.container div 所有宽度都以 % 设置，当我调整浏览器大小时， block 也会调整大小，但文本 <p>没有。这是为什么？

这是一个链接 http://jsfiddle.net/TomasRR/WuNL3/10/

我已经声明当容器使用此命令达到 800px 时，.left 和 .right 宽度应始终为 400px

 @media only screen and (max-width: 800px) {
    .left, .right {
      width: 400px;
    }

然而，当从浏览器的最大宽度调整到 800px 时，我也希望我的文本在 .right 中调整大小，我的意思是下拉到另一行，这样我就可以看到完整的句子。

<div class="cont">
      <div class="left">
        <h1>Programming and fuss</h1>
          <h2><em>by Tomas R. </em></h2>
  <p>MY TOP 3 PAGES:</p>
          <a href="http://www.twitter.com">TWITTER</a>
          <a href="http://www.wikipedia.org">WIKIPEDIA</a>
          <a href="http://www.vice.com">VICE</a>
      </div>

      <div class="right">
              <p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p>
      </div>  
</div> <!-- .cont -->

.left 我不感兴趣。如何修复 .right 中的文本是我的问题。

Answer 1

您的 cont 类的 white-space:nowrap; 条目是问题所在。这会阻止您的段落在 div 中换行

如果您希望 2 个 div 并排放置，请使用 float:left; 和 float:right;

为了解决右侧 div 低于左侧 div 的问题，您需要对每个 div 使用 width: calc(50% - 4px);，因为您在 1px 的 div 周围设置了边框厚度。如果调整边框粗细，则需要调整减去的像素。