首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

html横向自动分段,该怎么解决

2013-09-28 
html横向自动分段是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效

html横向自动分段
是否有办法做到横向自动分段?

就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图

html横向自动分段,该怎么解决
[解决办法]


<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>test</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;}
        table{border-collapse:collapse;border-spacing:0;}
        li{list-style:none;}
        fieldset,img{border:0;}
        a{color:#0a8cd2;text-decoration:none;}
        a:hover{text-decoration:underline;}
        .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
        .clearfix{display:inline-block;}
        .clearfix{display:block;}
        .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;}
        .none{display:none}
        .wrap{width: 800px;}
        .list li{float: left;width: 175px;margin-bottom: 3px;}
    </style>
</head>
<body>
<div class="wrap">
    <ul class="list clearfix">
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
        <li>转载文章请注明出自“CSDN(www.csdn.net)”。</li>
    </ul>
</div>
</body>
</html>

[解决办法]
要css3  可以实现  

 <style>
 .col4{
border:1px solid #000;
-moz-column-count:4;
-webkit-column-count:4;
column-count:4;
padding:10px;
}
</style>
<div class="col4">
是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图
是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图


是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图
是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图是否有办法做到横向自动分段?就是说,高固定,如果文字很多,超出高度,则会向右另起一段?效果如图
</div>

热点排行