Question

它是这样绘制的，是我所期待的：

 ______________________topofpage __________________________
 anything.gif                            rightbox2 rightbox
 __________________________________________________________

但是如果屏幕很小或者浏览器的大小调整到足够大的尺寸就会发生这种情况：

 ______topofpage _____
 anything.gif rightbox    
 _____________________                                       
 rightbox2

如果它更小，那就是发生的事情：

 ____topofpage ___
   rightbox    
 _________________                                       
 anything.gif 
 rightbox2

如果屏幕/浏览器尺寸小于内容，那就是我想要发生的事情：

  __________topofpage____________

  anything.gif rightbox2 rightbox   
  _______________________________

Answer 1

以％表示宽度而不是＆＃39; px＆＃39;。

Answer 2

如果你想要固定位置，不清楚你问的是什么： -

#ContainerAFixed
{
  position: fixed;
  width: 400px;
  height: 100px;
  left: 50%;
  top: 0%;
  margin-left: -200px; /*half the width*/
}

Answer 3

我认为您需要使用的是媒体查询，当浏览器低于特定大小时，您会强制容器#topofpage成为已定义的宽度。这样你就可以防止包裹。

此外，如果您将#rightbox和#rightbox2放在他们自己的包含div的右侧，并将img向左浮动（并使其成为display:block），然后在您的媒体查询下方某个断点给它一个特定的宽度，它不会换行。

<div id="topofpage">
   <img src="anything.gif"> 
   <div id="rightContainer">
     <div id="rightbox">...</div>  
     <div id="rightbox2">...</div>
   </div>
</div>

即

@media screen and (max-width: 500px) {
    #topofpage{
        width: 500px;
    }
    #rightContainer {
        width: 300px;
    }
}

CSS：我不希望容器在彼此之下移动

3 个答案: