<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平排列方法</title> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> </head> <body> <!--方法一：使用display,margin等--> <div class="break-list1"> <div class="list list1"> <img src="img/yx.png" /> </div> <div class="list list2"> <img src="img/yx.png"/> </div> <div class="list list3"> <img src="img/yx.png"/> </div> </div> <style type="text/css"> .break-list1{width: 100%; text-align: center;} /*.list{ 33%;display: table-cell; border: none;} *//*仅内容图片大的时候*/ .break-list1 .list{width: 32.5%;display: inline-block; border: none;} /*内容图片大、小的时候均可使用*/ .break-list1 .list img{width: 100%;} </style> <!--方法二：使用Float--> <div class="break-list"> <ul> <li><img src="img/yx.png"/></li> <li><img src="img/yx.png"/></li> <li><img src="img/yx.png"/></li> <li><img src="img/yx.png"/></li> <li><img src="img/yx.png"/></li> <li><img src="img/yx.png"/></li> <li><img src="img/yx.png"/></li> <li><img src="img/yx.png"/></li> <li><img src="img/yx.png"/></li> <div class="clear" style="clear:both"></div> </ul> </div> <style type="text/css"> .break-list{} .break-list ul li{width: 33%;height: auto;display: inline-block;border-bottom: 1px solid #dadee8;border-left: 1px solid #dadee8;float: left;} .break-list ul li img{width: 100%;height: auto;} </style> </body> <style type="text/css"> html { font-family: "微软雅黑", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%; } body { margin: 0; line-height: 1.5; background-color: white; height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } svg:not(:root) { overflow: hidden; } a { background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; } a:active { outline: 0; } a:active { color: red; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; vertical-align: middle; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } code, kbd, pre, samp { font-family: "微软雅黑", monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; resize: vertical; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } html, button, input, select, textarea { font-family: "微软雅黑", Helvetica, STHeiTi, Arial, sans-serif; } h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { margin: 0; } ul, ol, li, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none outside none; } h1, h2, h3 { line-height: 2; font-weight: normal; } h1 { font-size: 1.8rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.4rem; } input::-moz-placeholder, textarea::-moz-placeholder { color: #cccccc; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cccccc; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cccccc; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style> </html>