Question

我有一个问题，我一整天都在苦苦挣扎。我有两个div彼此相邻排列。问题是当我调整浏览器窗口的大小（较小）时，右侧div会跳到左侧div之下。我为包含父项指定了固定宽度，并确保两个内部div的宽度不超过父div的宽度。我的标记：

<div class="parent">
  <div class="left">contents</div>
  <div class="right">contents</div>
</div>

<style>
 .parent
 {
   width: 800px;
 }

 .left
 {
   float: left;
   width: 305px;
 }

 .right
 {
   display: inline-block; (also tried float: left)
   width: 480px;
 }
</style>

我真的需要帮助，我疯了。谢谢

Answer 1

这是你的代码插入jsFiddle：

http://jsfiddle.net/FHqtK/

必须有其他一些风格干扰，因为它在float: left处表现得很好。

Answer 2

你确定你的div是你指定的宽度吗？它们可能有边距或填充。另外，我希望您发布的代码与您正在使用的代码不完全相同。样式标记应该在head标记内。

您的结构应如下所示：http://jsfiddle.net/XEamY/

Answer 3

试试这个：

  .right {
        display: inline-block;
        white-space: normal;
        width: 480px;
    }

Div改变位置，窗口调整大小

3 个答案: