Ruby's Louvre

每天学习一点点算法

导航

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

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

   
    <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;
            }


     

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>

总结一下上面的问题(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

posted on 2012-12-10 12:19  司徒正美  阅读(5867)  评论(3)    收藏  举报