Question

我在页面上有2个div

<div id="main"></div>
<div id="panel"></div>

并使用float将main设为左侧，将面板设为右侧

#photos-main {
float: left;
width: 800px;
position: relative;
}

#panel {
float: left;
margin-left: 830px;
position: absolute;
}

我想让面板填充左侧页面空间，我应该使用哪个css？

Answer 1

不要漂浮它，并使其相对定位。取出保证金。浮动“主”意味着它将一直只是“面板”的左侧。如果您按照自己的意愿定义“主要”，“面板”将自动占用剩余空间。

#photos-main {
float: left;
width: 800px;
position: relative;
}

#panel {
}

Answer 2

看起来你正在尝试构建一些布局，对吧？如果是这种情况，请考虑实施（因此学习）这些链接中提供的一些技术：

40 Tutorials and tips about CSS Layouts

CSS Positioning

The perfect three columns layout

希望它有所帮助！

Answer 3

你可以用这种方法浮动：

#photos-main {
 float: left;
 width: 800px;
}

#panel {
 float: right; /*to have the panel on the right side*/
 width: 100px; /*with a width of 100px*/
}

然后你必须用另一个标签包装两个标签，这两个标签得到两个元素的总宽度。

澄清这两个列的布局并放置，例如下面是一个页脚，在你的HTML结构中添加另一个页面并将css简单地设置为“clear：both;”，这样浮动就会停止。

完整样本

HTML

<div id="wrap">
  <div id="photos-main"></div>
  <div id="panel"></div>
  <div id="clear"></div>
</div>

CSS

#wrap {
 width: 900px;
}

#photos-main {
 float: left;
 width: 800px;
}

#panel {
 float: right; /*to have the panel on the right side*/
 width: 100px; /*with a width of 100px*/
}

#clear {
 clear:both;
}

如何为2 div制作100％宽度

3 个答案: