简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

一列div宽度固定、一列div宽度自适应_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:31:23
Original
1250 people have browsed it

一列固定、一列宽度自适应:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
之前的代码中，已经介绍过一列宽度自适应和二列宽度自适应，实现自适应的效果一般就是将相应对象的宽度以百分比的形式表示。在实际的布局中，一列宽度固定、一列宽度自适应。下面我们就以左侧div宽度固定，右侧div宽度是自适应为例。
代码实例:

<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">body{  margin:0px;  padding:0px;}.left{  width:200px;  height:50px;  background-color:green;  position:absolute;  left:0px;}.right{  height:50px;  background-color:blue;  margin-left:200px;}</style></head><body><div class="left">我是左边</div><div class="right">我是右边</div></body></html>
Copy after login

以上代码中左栏div宽度是固定值200px，并且将其进行绝对定位，这样它就脱离文档流了，不会对周围的div定位造成影响。这个时候设置右边div的左外边距等于左边div的宽度，且不设置此div的宽度以达到宽度自使用效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4767

更多内容可以参阅:http://www.softwhy.com/divcss/

Related labels：
一列div宽度固定、一列div宽度自适应
source：php.cn
Previous article：Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unacceptable content-type: text/html" 的问题原因及解决方案_html/css_WEB-ITnose Next article：CSS如何实现段落首字符缩进两个字符效果_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Responsive image and text Div side by side So I'm trying to create a template where one div is an image and the other is text with a ...
From 2024-04-02 08:59:38
0
1
349
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！