CSS内容的位置

Question

下面的图片代表了我的网页：

现在的问题是当我将屏幕尺寸减小到小于620px时，布局应该是：

虽然它是这样的：

从图片中，您可以清楚地找到两个问题：

我的CSS菜单：

#menu
    {
    width: 160px;
    height: 257px;
    background-color:#878787;   
    position:absolute;
    margin-left:50px;
    float:left;
    }

以下是内容的CSS：

#content
{
width: 620px;
float: right;
margin-right: 50px;
}

这里是内容中文字的CSS：

#top
{
margin-top:-3px;
padding-top:55px;
padding-bottom:77px;
padding-left:35px;
padding-right:30px; 
background-color: white;
}

任何人都可以为我提供相同的解决方案。 我希望内容左边的50px空间随着分辨率的降低而消失。另外，我需要我的内容文本来包装菜单。

Answer 1

尝试

#top
{
margin-top:-3px;
padding-top:55px;
padding-bottom:77px;
padding-left:35px;
padding-right:30px; 
background-color: white;
position:relative;
}

Answer 2

你应该尝试添加另一个浮动的元素。这可能是一个看不见的元素。它是一个棘手的问题，使文本环绕的东西并不难，但你的布局也首先将文本与它完全分开。 Float是一种使文本环绕的理想方式。

鉴于此，您可能需要使用媒体查询在不同的屏幕尺寸上进行（略微）激进的布局交换。我在这里写了一个笔，展示了可能发生的事情的一个例子。这只是为了引导您朝着正确的方向前进，它不会完全解决您的问题。

实施例

http://codepen.io/EightArmsHQ/pen/cfBet/

请调整浏览器的大小以使其正常工作

在示例中：

HTML

<div class="wrap">
  <div class="float"></div>
  <div class="text">Lorem .... repellat!</div>
</div>

CSS

.text{
  width:600px;
  padding-left:30px;
}

.float{
  width:200px;
  height:200px;
  background:#f00;
  float:left;
}

.wrap{
  max-width:80%;
  margin:0 auto;
}

@media screen and (min-width:800px){
  .text{
    width:600px;
    padding-left:300px;
  }
}