2016-05-17 180 views
-1

我不知道這是什麼。這是保證金還是填充?它是怎麼來的,從哪裏來的?這是照片下的空白處。我也重置了代碼,但重置代碼在這裏不起作用。刪除邊距或填充?

截圖:

SS

驗證碼:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
a:hover { 
 
    text-decoration: none; 
 
} 
 
a:focus { 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #7e8287; 
 
} 
 
.floatleft { 
 
    float: left 
 
} 
 
.floatright { 
 
    float: right 
 
} 
 
.colum { 
 
    width: 1170px; 
 
    margin: 0 auto; 
 
} 
 
.fix { 
 
    overflow: hidden 
 
} 
 
.clear { 
 
    clear: both 
 
} 
 
.header_area { 
 
    background: #02918c; 
 
    min-height: 60px; 
 
} 
 
.header {} .header h1 { 
 
    font-size: 26px; 
 
    font-weight: 900; 
 
    margin-top: 15px; 
 
    text-transform: uppercase; 
 
} 
 
.header a { 
 
    color: #fff; 
 
} 
 
.header a h1 span { 
 
    color: #cfc91d; 
 
} 
 
.mainmenu {} .mainmenu ul {} .mainmenu ul#nav {} .mainmenu ul#nav li { 
 
    display: inline 
 
} 
 
.mainmenu ul#nav li a { 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
    padding-top: 20px; 
 
    padding-left: 50px; 
 
} 
 
.mainmenu ul#nav li a:hover {} .welcome_text_area { 
 
    background: url(../img/bg-2.jpg) no-repeat scroll center center/cover 
 
} 
 
.wel-overlay { 
 
    background: rgba(0, 0, 0, .7) 
 
} 
 
.welcome_text { 
 
    text-align: center; 
 
    color: #fff; 
 
    padding: 200px 0 
 
} 
 
.welcome_text h1 { 
 
    font-size: 68px; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    margin: 5px 0; 
 
    letter-spacing: 20px; 
 
} 
 
.welcome_text h4 { 
 
    font-size: 30px; 
 
} 
 
.welcome_text p { 
 
    font-size: 18px 
 
} 
 
.welcome_text a.know_more { 
 
    text-align: center; 
 
    background-color: #cfc91d; 
 
    display: inline-block; 
 
    padding: 15px; 
 
    color: #0b1016; 
 
    font-weight: 900; 
 
    width: 200px; 
 
    height: 50px; 
 
    margin-top: 130px; 
 
    position: relative 
 
} 
 
.welcome_text a.know_more:before { 
 
    position: absolute; 
 
    content: "}"; 
 
    top: -145px; 
 
    left: 90px; 
 
    font-size: 120px; 
 
    font-weight: 100; 
 
    color: #fdfdfd; 
 
    transform: rotate(90deg); 
 
} 
 
.promo_area { 
 
    text-align: center; 
 
    margin-bottom: 30px; 
 
} 
 
.colum {} .promo {} .promo_title, 
 
.work_title { 
 
    padding: 100px 0; 
 
} 
 
.promo_title h1, 
 
.work_title h1 { 
 
    color: #02918c; 
 
    font-size: 48px; 
 
    font-weight: 900; 
 
    padding-bottom: 60px; 
 
    position: relative 
 
} 
 
.promo_title h1:before { 
 
    content: ""; 
 
    background: url(../img/about-bg.png) no-repeat scroll 0 0; 
 
    width: 160px; 
 
    height: 10px; 
 
    bottom: 27px; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -80px; 
 
} 
 
.promo_title p, 
 
.work_title p { 
 
    font-size: 16px; 
 
    color: #7e8287; 
 
    padding: 0 115px; 
 
} 
 
.promo_title p span { 
 
    font-size: 23px; 
 
    color: #7e8287; 
 
    font-weight: 900; 
 
} 
 
.promo_list { 
 
    text-align: center; 
 
    margin-bottom: 250px; 
 
} 
 
.promo_list div:last-child { 
 
    border-right: 0 
 
} 
 
.single_list { 
 
    width: 290px; 
 
    padding: 0 15px; 
 
    border-right: 1px solid #d9dbdb 
 
} 
 
.single_list h3 { 
 
    font-size: 16px; 
 
    color: #7e8287; 
 
    margin: 34px 0; 
 
    font-weight: 900; 
 
} 
 
.single_list p { 
 
    font-size: 11px; 
 
    color: #7e8287; 
 
} 
 
.single_list img {} .service_area { 
 
    background: #f0f0e8; 
 
    position: relative 
 
} 
 
.rightimg { 
 
    position: absolute; 
 
    background: url(../img/rightimg.jpg) no-repeat scroll 0 0/cover; 
 
    right: 0; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    opacity: 0.3 
 
} 
 
.leftarea { 
 
    width: 590px 
 
} 
 
.service_list { 
 
    padding: 60px 60px; 
 
} 
 
.service_list h1 { 
 
    padding: 20px 0; 
 
    font-size: 46px; 
 
    color: #02918c; 
 
    font-weight: 900; 
 
    position: relative 
 
} 
 
.service_list h1:before { 
 
    content: ""; 
 
    background: url(../img/about-bg.png) no-repeat scroll 0 0; 
 
    width: 160px; 
 
    height: 10px; 
 
    position: absolute; 
 
    bottom: -12px; 
 
} 
 
.service_list p { 
 
    padding: 35px 0 
 
} 
 
.service_item .ss_list { 
 
    width: 295px; 
 
    padding-left: 60px; 
 
    padding-bottom: 30px; 
 
    text-align: left 
 
} 
 
.service_item .ss_list h3 { 
 
    padding: 20px 0; 
 
    margin-bottom: 10px; 
 
} 
 
.service_item .ss_list p { 
 
    margin-bottom: 15px; 
 
} 
 
.service_item .ss_list img { 
 
    margin-bottom: 15px; 
 
} 
 
.work_title h1 { 
 
    text-align: center 
 
} 
 
.work_title p { 
 
    max-width: 920px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.work_area { 
 
    margin: 0; 
 
} 
 
.work_list {} .work_slider { 
 
    width: 25%; 
 
} 
 
.work_slider img { 
 
    width: 100%; 
 
} 
 
.slider_detail {} .slider_overlay {}
<div class="work_area"> 
 
    <div class="colum"> 
 
    <div class="mywork"> 
 
     <div class="work_title fix"> 
 
     <h1>MY WORK</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="work_list fix"> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

如何刪除空白?

回答

1

這一差距是因爲img是一個內聯元素,所以它設置display:block,因此可以被視爲塊級元素

  • ,你也可以將它設置vertical-align:bottom,給予img是默認vertical-align:baseline

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
a:hover { 
 
    text-decoration: none; 
 
} 
 
a:focus { 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #7e8287; 
 
} 
 
.floatleft { 
 
    float: left 
 
} 
 
.floatright { 
 
    float: right 
 
} 
 
.colum { 
 
    width: 1170px; 
 
    margin: 0 auto; 
 
} 
 
.fix { 
 
    overflow: hidden 
 
} 
 
.clear { 
 
    clear: both 
 
} 
 
.header_area { 
 
    background: #02918c; 
 
    min-height: 60px; 
 
} 
 
.header {} .header h1 { 
 
    font-size: 26px; 
 
    font-weight: 900; 
 
    margin-top: 15px; 
 
    text-transform: uppercase; 
 
} 
 
.header a { 
 
    color: #fff; 
 
} 
 
.header a h1 span { 
 
    color: #cfc91d; 
 
} 
 
.mainmenu {} .mainmenu ul {} .mainmenu ul#nav {} .mainmenu ul#nav li { 
 
    display: inline 
 
} 
 
.mainmenu ul#nav li a { 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
    padding-top: 20px; 
 
    padding-left: 50px; 
 
} 
 
.mainmenu ul#nav li a:hover {} .welcome_text_area { 
 
    background: url(../img/bg-2.jpg) no-repeat scroll center center/cover 
 
} 
 
.wel-overlay { 
 
    background: rgba(0, 0, 0, .7) 
 
} 
 
.welcome_text { 
 
    text-align: center; 
 
    color: #fff; 
 
    padding: 200px 0 
 
} 
 
.welcome_text h1 { 
 
    font-size: 68px; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    margin: 5px 0; 
 
    letter-spacing: 20px; 
 
} 
 
.welcome_text h4 { 
 
    font-size: 30px; 
 
} 
 
.welcome_text p { 
 
    font-size: 18px 
 
} 
 
.welcome_text a.know_more { 
 
    text-align: center; 
 
    background-color: #cfc91d; 
 
    display: inline-block; 
 
    padding: 15px; 
 
    color: #0b1016; 
 
    font-weight: 900; 
 
    width: 200px; 
 
    height: 50px; 
 
    margin-top: 130px; 
 
    position: relative 
 
} 
 
.welcome_text a.know_more:before { 
 
    position: absolute; 
 
    content: "}"; 
 
    top: -145px; 
 
    left: 90px; 
 
    font-size: 120px; 
 
    font-weight: 100; 
 
    color: #fdfdfd; 
 
    transform: rotate(90deg); 
 
} 
 
.promo_area { 
 
    text-align: center; 
 
    margin-bottom: 30px; 
 
} 
 
.colum {} .promo {} .promo_title, 
 
.work_title { 
 
    padding: 100px 0; 
 
} 
 
.promo_title h1, 
 
.work_title h1 { 
 
    color: #02918c; 
 
    font-size: 48px; 
 
    font-weight: 900; 
 
    padding-bottom: 60px; 
 
    position: relative 
 
} 
 
.promo_title h1:before { 
 
    content: ""; 
 
    background: url(../img/about-bg.png) no-repeat scroll 0 0; 
 
    width: 160px; 
 
    height: 10px; 
 
    bottom: 27px; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -80px; 
 
} 
 
.promo_title p, 
 
.work_title p { 
 
    font-size: 16px; 
 
    color: #7e8287; 
 
    padding: 0 115px; 
 
} 
 
.promo_title p span { 
 
    font-size: 23px; 
 
    color: #7e8287; 
 
    font-weight: 900; 
 
} 
 
.promo_list { 
 
    text-align: center; 
 
    margin-bottom: 250px; 
 
} 
 
.promo_list div:last-child { 
 
    border-right: 0 
 
} 
 
.single_list { 
 
    width: 290px; 
 
    padding: 0 15px; 
 
    border-right: 1px solid #d9dbdb 
 
} 
 
.single_list h3 { 
 
    font-size: 16px; 
 
    color: #7e8287; 
 
    margin: 34px 0; 
 
    font-weight: 900; 
 
} 
 
.single_list p { 
 
    font-size: 11px; 
 
    color: #7e8287; 
 
} 
 
.single_list img {} .service_area { 
 
    background: #f0f0e8; 
 
    position: relative 
 
} 
 
.rightimg { 
 
    position: absolute; 
 
    background: url(../img/rightimg.jpg) no-repeat scroll 0 0/cover; 
 
    right: 0; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    opacity: 0.3 
 
} 
 
.leftarea { 
 
    width: 590px 
 
} 
 
.service_list { 
 
    padding: 60px 60px; 
 
} 
 
.service_list h1 { 
 
    padding: 20px 0; 
 
    font-size: 46px; 
 
    color: #02918c; 
 
    font-weight: 900; 
 
    position: relative 
 
} 
 
.service_list h1:before { 
 
    content: ""; 
 
    background: url(../img/about-bg.png) no-repeat scroll 0 0; 
 
    width: 160px; 
 
    height: 10px; 
 
    position: absolute; 
 
    bottom: -12px; 
 
} 
 
.service_list p { 
 
    padding: 35px 0 
 
} 
 
.service_item .ss_list { 
 
    width: 295px; 
 
    padding-left: 60px; 
 
    padding-bottom: 30px; 
 
    text-align: left 
 
} 
 
.service_item .ss_list h3 { 
 
    padding: 20px 0; 
 
    margin-bottom: 10px; 
 
} 
 
.service_item .ss_list p { 
 
    margin-bottom: 15px; 
 
} 
 
.service_item .ss_list img { 
 
    margin-bottom: 15px; 
 
} 
 
.work_title h1 { 
 
    text-align: center 
 
} 
 
.work_title p { 
 
    max-width: 920px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.work_area { 
 
    margin: 0; 
 
} 
 
.work_list {} .work_slider { 
 
    width: 25%; 
 
} 
 
.work_slider img { 
 
    width: 100%; 
 
    display:block 
 
} 
 
.slider_detail {} .slider_overlay {}
<div class="work_area"> 
 
    <div class="colum"> 
 
    <div class="mywork"> 
 
     <div class="work_title fix"> 
 
     <h1>MY WORK</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="work_list fix"> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    <div class="work_slider floatleft"> 
 
     <img src="http://lorempixel.com/317/238" /> 
 
     <div class="slider_detail"> 
 
     <div class="slider_overlay"></div> 
 
     <h3></h3> 
 
     <p></p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

1

只補充一點:

.work_slider { 
    line-height: 0; 
} 

* {margin: 0; padding: 0;} 
 
a:hover {text-decoration: none;} 
 
a:focus {text-decoration: none;} 
 
a:visited {text-decoration: none;} 
 
ul {margin: 0; padding: 0;list-style-type: none;} 
 
h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0} 
 
body {font-family: 'Open Sans', sans-serif; color:#7e8287;} 
 
.floatleft {float: left} 
 
.floatright {float: right} 
 
.colum{width: 1170px; margin: 0 auto;} 
 
.fix {overflow: hidden} 
 
.clear {clear: both} 
 

 

 

 
.header_area{background: #02918c; min-height: 60px;} 
 
.header {} 
 
.header h1 { font-size: 26px; font-weight: 900; margin-top: 15px; text-transform: uppercase;} 
 
.header a {color: #fff;} 
 
.header a h1 span{color: #cfc91d;} 
 
.mainmenu {} 
 
.mainmenu ul{} 
 
.mainmenu ul#nav {} 
 
.mainmenu ul#nav li{display: inline} 
 
.mainmenu ul#nav li a {color:#fff; font-size: 14px; font-weight: 900; text-transform: uppercase; display: inline-block;padding-top: 20px; padding-left: 50px;} 
 
.mainmenu ul#nav li a:hover{} 
 

 

 
.welcome_text_area {background: url(../img/bg-2.jpg) no-repeat scroll center center/cover} 
 
.wel-overlay {background: rgba(0, 0, 0, .7)} 
 
.welcome_text {text-align: center;color:#fff; padding: 200px 0} 
 
.welcome_text h1 {font-size: 68px; font-weight: 900;text-transform: uppercase;margin: 5px 0;letter-spacing: 20px;} 
 
.welcome_text h4 {font-size: 30px;} 
 
.welcome_text p {font-size: 18px} 
 
.welcome_text a.know_more {text-align: center; background-color: #cfc91d;display: inline-block; padding: 15px;color: #0b1016; font-weight: 900;width: 200px; height: 50px;margin-top: 130px; position: relative} 
 
.welcome_text a.know_more:before {position: absolute;content: "}";top: -145px;left: 90px;font-size: 120px;font-weight: 100;color: #fdfdfd;transform: rotate(90deg);} 
 

 

 
.promo_area {text-align: center; margin-bottom: 30px;} 
 
.colum{} 
 
.promo{} 
 
.promo_title, .work_title {padding: 100px 0;} 
 
.promo_title h1, .work_title h1 {color: #02918c; font-size: 48px; font-weight: 900;padding-bottom: 60px;position: relative} 
 
.promo_title h1:before {content: "";background: url(../img/about-bg.png) no-repeat scroll 0 0;width: 160px;height: 10px;bottom: 27px;position: absolute;left: 50%;margin-left: -80px;} 
 
.promo_title p, .work_title p {font-size:16px; color:#7e8287;padding: 0 115px;} 
 
.promo_title p span {font-size:23px; color: #7e8287; font-weight: 900;} 
 

 
.promo_list{text-align: center;margin-bottom: 250px;} 
 
.promo_list div:last-child {border-right: 0} 
 
.single_list {width: 290px; padding: 0 15px; border-right: 1px solid #d9dbdb} 
 
.single_list h3 {font-size: 16px; color: #7e8287; margin: 34px 0; font-weight: 900;} 
 
.single_list p {font-size: 11px; color: #7e8287;} 
 
.single_list img {} 
 

 

 
.service_area {background: #f0f0e8;position: relative} 
 
.rightimg {position: absolute; background: url(../img/rightimg.jpg) no-repeat scroll 0 0/cover; right: 0; top: 0; width:50%; height: 100%;opacity: 0.3} 
 
.leftarea {width: 590px} 
 
.service_list {padding: 60px 60px;} 
 
.service_list h1 {padding: 20px 0; font-size: 46px; color: #02918c;font-weight: 900; position:relative} 
 
.service_list h1:before {content: ""; background: url(../img/about-bg.png) no-repeat scroll 0 0;width: 160px; height: 10px;position: absolute;bottom: -12px;} 
 
.service_list p {padding: 35px 0} 
 

 
.service_item .ss_list {width: 295px;padding-left: 60px; padding-bottom: 30px; text-align: left} 
 
.service_item .ss_list h3 {padding: 20px 0;margin-bottom: 10px;} 
 
.service_item .ss_list p {margin-bottom: 15px;} 
 
.service_item .ss_list img {margin-bottom: 15px;} 
 

 

 

 
.work_title h1 {text-align:center} 
 
.work_title p { max-width: 920px; margin: 0 auto; text-align: center;} 
 

 
.work_area {margin: 0;} 
 
.work_list {} 
 
.work_slider {width: 25%; line-height: 0;} 
 
.work_slider img {width:100%;} 
 
.slider_detail {} 
 
.slider_overlay {}
<div class="work_area"> 
 
      <div class="colum"> 
 
       <div class="mywork"> 
 
        <div class="work_title fix"> 
 
         <h1>MY WORK</h1> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="work_list fix"> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/317/238" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3></h3> 
 
         <p></p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/317/238" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3></h3> 
 
         <p></p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/317/238" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3></h3> 
 
         <p></p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/317/238" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3></h3> 
 
         <p></p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/317/238" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3></h3> 
 
         <p></p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/317/238" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3></h3> 
 
         <p></p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/317/238" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3></h3> 
 
         <p></p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/317/238" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3></h3> 
 
         <p></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

+0

這是一個「黑客」,不是壽 – dippas

+0

爲僅包含圖像(如這裏)的容器最好的解決方案,這是完全正常的。 – Johannes

+0

再次,這是一個「黑客」,「行高」是**不是這裏問題的原因。對OP進行教育總是比較好,因爲這是爲什麼導致問題,然後顯示可能的解決方案,而不是黑客(只有在有解決方案的情況下) – dippas