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