【】一个DIV中并列放两个DIV。右侧div大小不定。_html/css_WEB-ITnose

html教程评论3.7K views阅读模式

如图所示:

想制作一个网页,其中头部是一个div,其中左边是一个图片,右侧是背景色(与图片右侧的颜色相同),根据浏览器的大小repeat-x。

下方是一个#middle的div嵌套两个叫left和right的div,其中left的width为200px;right的右边缘要与头部右边缘一致。

问题是右边right的总是比较窄,做不到根据页面大小适应啊???

回复讨论(解决方案)

在右侧div内加个div,并加上一个inner的类

div1{float:left;position:relative;margin-right:-200px;}div2{float:right;width:100%;}div2 .inner{margin-left:200px;}

http://jsfiddle.net/jikeytang/b75z9/2/
网速快的话,打开看看。

回2L,加上margin-right:-200px;之后左侧就消失了

"问题是右边right的总是比较窄,做不到根据页面大小适应啊???"啥意思?
左边宽度固定的话,右边应该填满共同容器的剩余宽度,根据页面宽度自适应。当页面宽度较小,右边才会很窄的吧。如果希望当页面宽度较小时,右边div不会太窄,可以给右边div定义一个min-width,或者,使用media query进行响应式布局,将右边或左边div垂直显示,不在一行。
以下是一个简单的两列布局的例子:

Test

你看看你的width设计的大小是否左右相等 还有高度大小

你也可以用DWcs5插入一个2行2列的表格

企鹅博客
  • 本文由 发表于 2019年7月22日 04:01:28
  • 转载请务必保留本文链接:https://www.qieseo.com/371893.html

发表评论