我有两个 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 中的文本是我的问题。
最佳答案
您的 cont 类的 white-space:nowrap;
条目是问题所在。这会阻止您的段落在 div 中换行
如果您希望 2 个 div 并排放置,请使用 float:left;
和 float:right;
为了解决右侧 div 低于左侧 div 的问题,您需要对每个 div 使用 width: calc(50% - 4px);
,因为您在 1px 的 div 周围设置了边框厚度。如果调整边框粗细,则需要调整减去的像素。
关于css - block 是流动的,但文本不会调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21439425/