Question

我在.left div中有两个div，.right和.container所有宽度都以％为单位设置，当我调整浏览器大小时，块调整大小但文本{{ 1}}没有。这是为什么？

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

我已声明。当使用此命令获取800px时，.left和.right应始终为400px宽度

<p>

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

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

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

Answer 1

你的续集的css中的white-space:nowrap;条目是问题所在。这会阻止您的段落包含在div

中

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

Answer 2

我会使用float:left代替并使用容器元素将宽度保持为50％而不需要使用calc来补偿边框

<!-- HTML -->
<div class="left">
     <div class="container">
         Foo
     </div>
</div>
<div class="right">
     <div class="container">
         Foo
     </div>
</div>

/* CSS */
.cont {                                
    width:100%;
}
.right .container { border:1px solid black; }
.right {                    
    width:50%;
    height:200px;    
    float:left;
}
.left .container { border:1px solid red; }
.left {    
    width:50%;
    height:200px;
    float:left;
    vertical-align:top;    
}

Demo

如果您希望它们总是占据宽度的一半，您只需删除在浏览器较小时设置设置宽度的媒体查询

Demo

作为前端设计师，我建议您在某些时候使用媒体查询在屏幕较小时将这些部分放在彼此的顶部，以便在小屏幕上响应和可读，like this

Answer 3

你的续集的css中的white-space:nowrap;条目是问题所在。这会阻止您的段落包含在div

中

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

要解决左侧div下方正确div的问题，您需要对每个div使用width: calc(50% - 4px);，因为您的边框围绕1px厚度的div。如果调整边框粗细，则需要调整减去的像素。

块是流动的，但文本不会调整大小

3 个答案: