两列布局实例

2023-10-15 17:49:52

上次一个朋友问的两列布局，半天没搞定，其实他的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>两列布局实例</title>
    <link rel="stylesheet" href="./style.csss" />
</head>
<body>
    <div id="contianer">
        <div class="row fix">
            <div class="each-film">
                <img src="./film-one.jpg" alt="filem-one" width="320" height="195"/>
                <div class="film-info">
                    <h2>[2店通用]XX影城</h2>
                    <span>单人影票！可升级套餐，黄金大片，超强视听感觉，惊爆你的眼球！</span>
                </div>
            </div>
            <div class="each-film">
                <img src="./film-two.jpg" alt="filem-one" width="320" height="195"/>
                <div class="film-info">
                    <h2>[2店通用]XX影城</h2>
                    <span>单人影票！可升级套餐，黄金大片，超强视听感觉，惊爆你的眼球！</span>
                </div>
            </div>
        </div>
        <div class="row fix">
            <div class="each-film">
                <img src="./film-one.jpg" alt="filem-one" width="320" height="195"/>
                <div class="film-info">
                    <h2>[2店通用]XX影城</h2>
                    <span>单人影票！可升级套餐，黄金大片，超强视听感觉，惊爆你的眼球！</span>
                </div>
            </div>
            <div class="each-film">
                <img src="./film-two.jpg" alt="filem-one" width="320" height="195"/>
                <div class="film-info">
                    <h2>[2店通用]XX影城</h2>
                    <span>单人影票！可升级套餐，黄金大片，超强视听感觉，惊爆你的眼球！</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

这里的css文件后缀是csss，只是为了说明css文件和后缀名无关，原来还不知道这个...

style.csss:

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

#contianer {
    width: 700px;
    margin-top: 100px;
    margin-left: 50px;
    padding: 30px;
    background-color: #d5d5d5;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
}

.fix {
    zoom:1;
}

.fix:after {
     display:block; 
     content:‘clear‘; 
     clear:both; 
     line-height:0; 
     visibility:hidden;
 }

 .each-film {
     float: left;
     margin-bottom: 20px;
     margin-right: 20px;
     padding: 5px;
     /*border: 1px black solid;*/
 }

 .film-info {
     width: 200px;
     margin-top: 13px;
     font: 12px/1.5 Arial,Tahoma,‘宋体‘,Verdana,STHeiTi,sans-serif;
     text-align: left;
 }

 .film-info span {
     font-size: 15px;
 }

两列布局实例

码农公寓

相关文章