為什么我寫完的CSS，上下的col對不齊？怎么可以達到以下圖片的效果？<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>Untitled?Document</title>
<style>
div.ibm-columns?{
????margin:0?auto;
}
div.ibm-col-6-4?{
????width:60%;
????float:left;
????padding:4px;
}
div.ibm-col-6-3?{
????width:45%;
????float:left;
????padding:4px;
}
div.ibm-col-6-1?{
????width:15%;
????float:left;
????padding:4px;
}
div.ibm-col-5-2?{
????width:36%;
????float:left;
????padding:4px;
}
div.ibm-col-5-1?{
????width:18%;
????float:left;
????padding:4px;
}
</style>
</head>
<body>
<div?class="ibm-columns">
??<div?class="ibm-col-6-4">
????<h2>Lorem?ipsum:?ibm-col-6-4</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempor?sit?amet,?ante.?Donec?eu?libero?sit?amet?quam?egestas?semper.?Aenean?ultricies?mi?vitae?est.?Mauris?placerat?eleifend?leo.?Quisque?sit?amet?est?et?sapien?ullamcorper?pharetra.?Vestibulum?erat?wisi,?condimentum?sed,?commodo?vitae,?ornare?sit?amet,?wisi.?Aenean?fermentum,?elit?eget?tincidunt?condimentum,?eros?ipsum?rutrum?orci,?sagittis?tempus?lacus?enim?ac?dui.?Donec?non?enim?in?turpis?pulvinar?facilisis.?Ut?felis.?Praesent?dapibus,?neque?id?cursus?faucibus,?tortor?neque?egestas?augue,?eu?vulputate?magna?eros?eu?erat.?Aliquam?erat?volutpat.?Nam?dui?mi,?tincidunt?quis,?accumsan?porttitor,?facilisis?luctus,?metus</p>
??</div>
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
</div>
<div?class="ibm-columns">
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
</div>
<div?class="ibm-columns">
??<div?class="ibm-col-6-3">
????<h2>Lorem?ipsum:?ibm-col-6-3</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempor?sit?amet,?ante.?Donec?eu?libero?sit?amet?quam?egestas?semper.?Aenean?ultricies?mi?vitae?est.?Mauris?placerat?eleifend?leo.?Quisque?sit?amet?est?et?sapien?ullamcorper?pharetra.?Vestibulum?erat?wisi,?condimentum?sed,?commodo?vitae,?ornare?sit?amet,?wisi.?Aenean?fermentum,?elit?eget?tincidunt?condimentum,?eros?ipsum?rutrum.</p>
??</div>
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
??<div?class="ibm-col-6-1">
????<h2>Lorem?ipsum:?ibm-col-6-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempo.</p>
??</div>
</div>
<div?class="ibm-columns">
??<div?class="ibm-col-5-2">
????<h2>Lorem?ipsum:?ibm-col-5-2</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.?Vestibulum?tortor?quam,?feugiat?vitae,?ultricies?eget,?tempor?sit?amet,?ante.?Donec?eu?libero?sit?amet?quam?egestas?semper.?Aenean?ultricies?mi?vitae?est.</p>
??</div>
??<div?class="ibm-col-5-1">
????<h2>Lorem?ipsum:?ibm-col-5-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.</p>
??</div>
??<div?class="ibm-col-5-1">
????<h2>Lorem?ipsum:?ibm-col-5-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.</p>
??</div>
??<div?class="ibm-col-5-1">
????<h2>Lorem?ipsum:?ibm-col-5-1</h2>
????<p>Pellentesque?habitant?morbi?tristique?senectus?et?netus?et?malesuada?fames?ac?turpis?egestas.</p>
??</div>
</div>
</body>
</html>
- 1 回答
- 0 關注
- 1340 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消