div自适应宽度_html/css_WEB-ITnose
程序员文章站
2022-05-19 11:48:42
...
对于div自适应宽度,网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后,不指定其float属性或将float属性指定为none,比如三栏布局居中的一栏为自适应宽度,就可以这样来定义三栏div:
这是左栏这是右栏这是中栏,且自适应宽度
效果如下:
但是如果我们增加中栏的文字内容,并且为其添加边框和背景色,就会发现问题了:
这是左栏这是右栏这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。
其结果如下:
可以看到,中栏仅有高度小于左右两栏的那部分内容才会自适应宽度,超出左右两栏的高度,就不受控制了,且其真实的宽度仍然是100%,这可以从背景和边框看出来。
不过既然它能允许浮动的两栏在其左右,并与左右两栏相安无事,就有了另一个解决方案,即指定中栏的左右内边距,以为两个侧栏留出位置,而自身内容不必担心会由于超出左右栏高度而失控。如果需要自适应宽度的部分有背景和边框,则可以在中栏中再增加一个子div,为其指定边框和背景,代码如下:
这是左栏这是右栏这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。
效果如下:
推荐阅读
-
html图片自适应代码(html图片适应屏幕宽度)
-
html图片自适应代码(html图片适应屏幕宽度)
-
echart根据div的宽度变化自适应
-
如何设置HTML页面自适应宽度的table(表格)(一)
-
div或img图片高度随宽度自适应的方法
-
HTML/CSS中,DIV高度自适应的解决方法
-
HTML5 移动页面自适应手机屏幕宽度详解
-
html 三列布局(两列自适应,一列固定宽度)
-
Codeforces Round #156 (Div. 2)-A. Greg's Workout_html/css_WEB-ITnose
-
Codeforces Round #107 (Div. 2)-A. Soft Drinking_html/css_WEB-ITnose