.main { width: 1000px; height: 400px; margin-top: 15px } @media (max-width: 500px) { .main { width: 100%; height: 100%; margin-top: 15px } } .main #carousel-container { width: 600px; height: 100%; background: #ddd; float: left; box-sizing: border-box; overflow: hidden } @media (max-width: 500px) { .main #carousel-container { width: 100%; height: auto; background: #ddd; float: left; box-sizing: border-box; overflow: hidden } } #carousel { width: 100%; position: relative; overflow: hidden; color: #fff } #carousel img { width: 100% } .main #news-container { width: 400px; height: 400px; background: rgb(242, 244, 249); float: left; box-sizing: border-box } @media (max-width: 500px) { .main #news-container { width: 100%; height: 100%; background: rgb(242, 244, 249); float: left; box-sizing: border-box; margin-top: 10px } } #news-container #title { width: 100%; height: 40px; border-bottom: 2px solid rgb(50, 190, 180); position: relative } #title h1 { line-height: 40px; font-size: 20px; font-family: 'microsoft jhenghei'; font-weight: 700; color: rgb(115, 141, 174); margin-left: 20px } #title>span { display: block; width: auto; height: 100%; font-size: 14px; vertical-align: middle; color: rgb(80, 80, 80); position: absolute; top: 10px; right: 25px } #title span img { width: 15px; height: 15px; padding: 2px; vertical-align: top } #news { width: 100%; height: 328px; overflow: hidden; border-bottom: 2px solid rgb(50, 190, 180) } #news li { width: 90%; height: 30px; margin-left: 5%; line-height: 30px; font-size: 14px; position: relative; border-bottom: 1px dashed #444; box-sizing: border-box } #news a { display: block; color: rgb(20, 50, 60); width: 74%; height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } #news a:hover { color: rgb(50, 190, 180) } #news span { display: block; height: 25px; font-size: 12px; color: rgb(128, 128, 128); position: absolute; top: 0px; right: 0px }