如何使用CSS使div宽度与其内容一起扩展?

2021年3月26日16:09:06 发表评论 906 次浏览

本文概述

给定一个HTML文档, 任务是使用CSS使div宽度及其内容扩展。为此, width属性用于设置元素的宽度, 但不包括元素的填充, 边距和边框。下面列出了width属性值:

语法如下:

width: length|percentage|auto|initial|inherit;

属性值:

  • 宽度:自动;用于将width属性设置为其默认值。如果width属性设置为auto, 则浏览器将计算元素的宽度。
  • 宽度长度;用于以px, cm等形式设置元素的宽度。长度不能为负数。
  • 宽度:初始;用于将width属性设置为其默认值。
  • 宽度:继承;它用于从其父元素设置width属性。

范例1:这个例子使用width:auto;属性以显示内容。

的HTML

<!DOCTYPE html>
< html >
  
< head >
     < title >
         How to make div width expand 
         with its content using CSS ?
     </ title >
  
     < style >
         .geek2 {
             background-color: #6ba832;
             height: 120px;
             width: 49%;
             float: left;
             color: white;
         }
  
         .geek3 {
             background-color: green;
             height: 7.5em;
             width: 49%;
             float: right;
             color: white;
         }
  
         h1 {
             color: Green;
         }
  
         .geek1 {
             background-color: #35cc27;
             width: auto;
             color: white;
             float: right;
         }
     </ style >
</ head >
  
< body >
     < center >
         < h1 >lsbin</ h1 >
  
         < h3 >
             How to make div width expand 
             with its content using CSS ?
         </ h3 >
  
         < div class = "geek2" >
             < p >
                 Javascript is the most common 
                 programming language used in 
                 many startups and large enterprises 
                 for software development. It is 
                 used as a client-side development 
                 tool in 95% of the websites. 
             </ p >
         </ div >
  
         < div class = "geek3" >
             < p >Python is a dynamic, high level, open-source programming language. 
                 It is relatively a newer language
                 in the world of programming 
                 languages and in AWS environment 
                 as well. This is the simplest 
                 language and beginners friendly. 
             </ p >
         </ div >
  
         < div class = "geek1" >
             < p >Java is an object-oriented language 
                 with fewer dependencies. It is a 
                 secure and dynamic language 
                 designed to have high performance.
                 Java is one of the earliest languages
                 used in business-critical ideas. 
             </ p >
         </ div >
     </ center >
</ body >
  
</ html >

输出如下:

如何使用CSS使div宽度与其内容一起扩展?1

更改屏幕尺寸后的输出:

如何使用CSS使div宽度与其内容一起扩展?2

范例2:本示例使用width:Inherit属性来显示内容。

的HTML

<!DOCTYPE html>
< html >
  
< head >
     < title >
         How to make div width expand 
         with its content using CSS ?
     </ title >
  
     < style >
         .geek2 {
             width: auto;
             background-color: green;
             width: 75%;
         }
  
         .geek3 {
             width: inherit;
             background-color: #28cc23;
             color: white;
         }
  
         .geek1 {
             width: 25%;
         }
  
         h1 {
             color: green;
         }
     </ style >
</ head >
  
< body >
     < center >
  
         < h1 >lsbin</ h1 >
  
         < h3 >
             How to make div width expand 
             with its content using CSS ?
         </ h3 >
  
         < div class = "geek2" >
             < p >
                 Javascript is the most common 
                 programming language used in 
                 many startups and large 
                 enterprises for software 
                 development.
             </ p >
  
  
             < div class = "geek3" >
                 < p >
                     Python is a dynamic, high 
                     level, open-source programming
                     language. It is relatively a 
                     newer language in the world
                     of programming languages and 
                     in AWS environment as well.
                 </ p >
             </ div >
  
             < div class = "geek1" >
                 < p >
                     Java is an object-oriented 
                     language with fewer dependencies. 
                     It is a secure and dynamic
                     language designed to have high 
                     performance.
                 </ p >
             </ div >
         </ div >
     </ center >
</ body >
  
</ html >

输出如下:

如何使用CSS使div宽度与其内容一起扩展?3

更改屏幕尺寸后的输出:

如何使用CSS使div宽度与其内容一起扩展?4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: