简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-06-24 11:31:23
원래의
1250명이 탐색했습니다.

一列固定、一列宽度自适应:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
之前的代码中，已经介绍过一列宽度自适应和二列宽度自适应，实现自适应的效果一般就是将相应对象的宽度以百分比的形式表示。在实际的布局中，一列宽度固定、一列宽度自适应。下面我们就以左侧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>
로그인 후 복사

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

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

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

관련 라벨：
一列div宽度固定、一列div宽度自适应
원천：php.cn
이전 기사：Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unacceptable content-type: text/html" 的问题原因及解决方案_html/css_WEB-ITnose 다음 기사：CSS如何实现段落首字符缩进两个字符效果_html/css_WEB-ITnose
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
반응형 이미지와 텍스트 Div를 나란히 배치 그래서 하나의 div는 이미지이고 다른 하나는 배경이 있는 텍스트인 템플릿을 만들려고 합니다. 이제 텍스트가 특정 픽셀 너비의 이미지 아래에 있도록 이 템플릿을 ...
에서 2024-04-02 08:59:38
0
1
349
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！