Three panels (with specified width) must be arranged side by side. The Panel contains content. The width of the content is determined by the title and centered. Other sections of the content are left aligned with the title.
<Div> <center class = "float_left"> <span> <H2> relatively short <p> 2013 </P> <p> 2013 </P> <p> 2013 </P> </H2> </span> </center> <center class = "float_left"> <span> <H2> let the width of the parent element be determined by the child element <p> 2013 </P> <p> 2013 </P> <p> 2013 </P> </H2> </span> </center> <center class = "float_left "> <span> <H2> the length is different <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 ;}</P> <p> <! Doctype HTML> <br/> <pead> <br/> <title> CSS demo by situ zhengmei </title> <br/> <meta HTTP -equiv = "Content-Type" content = "text/html; charset = UTF-8 "> </P> <p> <style> <br/>. float_left {<br/> float: Left; <br/> width: 350px; <br/> Height: 200px; <br/> border: 1px solid # cdcdcd; <br/>}< br/>. float_left span {<br/> display: inline-block; <br/>}< br/>. float_left H2 {<br/> margin: 0; <br/> color: White; <br/> text-align: Left; <br/> Height: 200px; <br/> Background: orange; <br/>}< br/>. float_left H2 P {<br/> font-size: 12px; <br/> color: white; <br/>}< br/> </style> </P> <p> </pead> <br/> <body> </P> <p> <Div> <br/> <center class = "float_left"> <br/> <span> <br/> <H2> This is short <br/> <p> 2013 </ p> <br/> <p> 2013 </P> <br/> <p> 2013 </P> <br/> </H2> <br/> </ span> <br/> </center> <br/> <center class = "float_left"> <br/> <span> <br/> <H2> the width is determined by the sub-element. <br/> <p> 2013 </P> <br/> <p> 2013 </P> <br/> <p> 2013 </P> <br/> </H2> <br/> </span> <br/> </center> <br/> <center class = "float_left"> <br/> <span> <br/> <H2> the length varies. <br/> <p> 2013 </P> <br/> <p> 2013 </P> <br/> <p> 2013 </P> <br/> </H2> <br/> </span> <br/> </center> </P> <p> </div> </P> <p> </body> <br/> </ptml> <br/>
RunCode
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>data: text/html,who we are
- rrrrrrrrrr
how we operate
support
</P> <p> <! Doctype HTML> <br/> <pead> <br/> <title> CSS demo by situ zhengmei </title> <br/> <meta HTTP -equiv = "Content-Type" content = "text/html; charset = UTF-8 "> </P> <p> <style> <br/> TD {text-align: center; width: 360px; Background-color: lightblue; Border: 1px solid blue ;}< br/> H3 {background-color: pink ;}< br/> ul {background-color: # DDD ;}</P> <p>. moD {display: inline-block; text-align: Left; Min-width: 9em ;} </P> <p> </style> </P> <p> </pead> <br/> <body> </P> <p> <Table> <br/> <tbody> </tbody> <br/> <tr> <br/> <TD> <br/> <Div class = "Mod"> <br/> <H3 class = "HD"> title </p> <br/> <ul class = "BD"> <br/> <li> List 1 </Li> <br/> <li> List 2 </LI> <br/> <li> List 3 </LI> <br/> </ul> <br/> </div> <br/> </TD> </P> <p> <TD> <br/> <Div class = "Mod"> <br/> <H3 class = "HD"> title 22222222 </p> <br/> <ul class = "BD"> <br/> <li> List 1 </LI> <br/> <li> List 2 </LI> <br/> <li> List 3 </LI> <br/> </ul> <br/> </div> <br/> </TD> </P> <p> <TD> <br/> <Div class = "Mod"> <br/> <H3 class = "HD"> title 3333 </p> <br/> <ul class = "BD"> <br/> <li> List list list List table list 1 </LI> <br/> <li> List 2 </LI> <br/> <li> List list 3 </Li> <br/> </ul> <br/> </div> <br/> </TD> <br/> </tr> <br/> </table> <br/> </body> <br/> </ptml> <br/>
Run code
To sum up the above problems (by a trace ):
"The title is centered relative to the container, and the content is always aligned with the left of the title"
1. Table mode: http://jsfiddle.net/Tz23W/1/
2. inline-Block Mode: http://jsfiddle.net/dCxHW/2/
3. Width: Max-content
This problem leads to the relationship between the usage of Min-content, Max-content, and fit-content in css3 sizing module and css2.1 (these attribute values cannot be explicitly specified in CSS 2.1, can only be calculated ). Http://dev.w3.org/csswg/css3-sizing/#width-height-keywords
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
