CSS题目 子元素决定父元素的大小

本文介绍如何实现标题在容器内居中显示,而其下内容与标题左对齐的效果。提供了三种实现方法:使用表格布局、inline-block布局及max-content宽度设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

要求三个面板(有指定宽度)并排,面板中有内容,内容的宽由标题确定,并且居中对齐,内容的其他段落与标题左对齐。

r_111.jpg

   
    <div>    
          <center class="float_left">
                <span>
                    <h2>这个比较短
                        <P>2013</p>
                        <p>2013</p>
                        <p>2013</p>
                    </h2>
                </span>
            </center>
            <center class="float_left">
                <span>
                    <h2>让父元素的宽度由子元素决定
                        <P>2013</p>
                        <p>2013</p>
                        <p>2013</p>
                    </h2>
                </span>
            </center>
            <center class="float_left">
                <span>
                    <h2>这个的长度也不一样
                        <P>2013</p>
                        <p>2013</p>
                        <p>2013</p>
                    </h2>
                </span>
            </center>
      </div>
     
           .float_left{
                float:left;
                width:350px;
                height:200px;
                border:1px solid #cdcdcd;
            }
            .float_left span{
                display:inline-block;
            }
            .float_left h2{
                margin:0;
                color:white;
                text-align: left;
                height:200px;
                background: orange;
            }
            .float_left h2 p{
                font-size: 12px;
                color:white;
            }
<!DOCTYPE html> <html> <head> <title>CSS Demo by 司徒正美</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <style> .float_left{ float:left; width:350px; height:200px; border:1px solid #cdcdcd; } .float_left span{ display:inline-block; } .float_left h2{ margin:0; color:white; text-align: left; height:200px; background: orange; } .float_left h2 p{ font-size: 12px; color:white; } </style> </head> <body> <div> <center class="float_left"> <span> <h2>这个比较短 <P>2013</p> <p>2013</p> <p>2013</p> </h2> </span> </center> <center class="float_left"> <span> <h2>让父元素的宽度由子元素决定 <P>2013</p> <p>2013</p> <p>2013</p> </h2> </span> </center> <center class="float_left"> <span> <h2>这个的长度也不一样 <P>2013</p> <p>2013</p> <p>2013</p> </h2> </span> </center> </div> </body> </html>

运行代码

     

data:text/html,<style> article { display: -webkit-flex; background: rgba(255, 0, 0, 0.2) } div { width: 33.33%; border-right: green solid; } section { background: rgba(0, 0, 255, 0.2); margin: auto; width: -webkit-max-content; } </style><article><div><section><h1>Who We Are</h1><ol><li><li>ttttttttttttttttttttt<li></ol></section></div><div><section><h1>How We Operate</h1><ol><li><li><li></ol></section></div><div><section><h1>Support</h1><ol><li><li><li></ol></section></div></article>
     

data:text/html,<style> article { display: -webkit-flex; background: rgba(255, 0, 0, 0.2) } div { width: 33.33%; border-right: green solid; } section { background: rgba(0, 0, 255, 0.2); margin: auto; display: table } </style><article><div><section><h1>Who We Are</h1><ol><li><li>rrrrrrrrrrrr<li></ol></section></div><div><section><h1>How We Operate</h1><ol><li><li><li></ol></section></div><div><section><h1>Support</h1><ol><li><li><li></ol></section></div></article>
<!DOCTYPE html> <html> <head> <title>CSS Demo by 司徒正美</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <style> td{text-align:center; width:360px; background-color:lightblue; border:1px solid blue;} h3{background-color:pink;} ul{background-color:#DDD;} .mod{ display:inline-block; text-align:left; min-width:9em;} </style> </head> <body> <table> <tbody></tbody> <tr> <td> <div class="mod"> <h3 class="hd">标题标题</h3> <ul class="bd"> <li>列表列表列表1</li> <li>列表列表列表2</li> <li>列表列表列表3</li> </ul> </div> </td> <td> <div class="mod"> <h3 class="hd">标题标题22222222</h3> <ul class="bd"> <li>列表列表列表1</li> <li>列表列表列表2</li> <li>列表列表列表3</li> </ul> </div> </td> <td> <div class="mod"> <h3 class="hd">标题标题3333</h3> <ul class="bd"> <li>列表列表列表列表列表列表表列表列表1</li> <li>列表列表列表2</li> <li>列表列表列表3</li> </ul> </div> </td> </tr> </table> </body> </html>

运行代码

总结一下上面的问题(by 一丝):

「标题相对容器居中,内容始终与标题左侧对齐」效果的实现

1.table 方式: http://jsfiddle.net/Tz23W/1/

2.inline-block 方式: http://jsfiddle.net/dCxHW/2/

3.width:max-content 方式

由此问题引出 CSS3 Sizing Module 中的 min-content,max-content,fit-content 等值的用法与 CSS2.1 的关系(CSS 2.1中不能显性指定这些属性值,只能通过计算的方式得到)。 http://dev.w3.org/csswg/css3-sizing/#width-height-keywords

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值