css问题清楚两个 - 大差距 [英] css problems with clear both - big gap

问题描述

HTML

 <div id="site-content">
                <div class="site-content">
                    <div id="site-content-left">
                    <h1>ՆՈՐ ԿԱՌՈՒՑՎՈՂ ԴՊՐՈՑԱՇԵՆՔ</h1>
                    <div id="site-content-dproc">
                        <div id="slider">
                            <div class="slide-img">img</div>
                            <div class="slide-text">
                                Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                            </div>
                            <div class="clear"></div>
                            <div class="slide-read-more">
                                <a href="/arm/dprocashinutyun">Ավելին...</a>
                            </div>
                        </div>
                    </div>
                    </div>
                <div id="site-content-right">
                    <div id="embeddedExample" style="">
                        <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto">
                        </div>
                    </div>
                <div id="site-content-ushadrutyun">
                <?php
                while($result_ushadrutyun_main_arm = mysql_fetch_array($query_main_ushadrutyun_arm)){
                    print $result_ushadrutyun_main_arm['short_content'];
                }
                ?>
                </div>
                </div>
                <div class="clear"></div>
                big gap
                </div>
            </div>

CSS

#site-content{
    background:red;
    margin-left:250px;
}
.site-content {
width:740px;
margin:0 auto;
padding:25px 0 0 0;
}
#site-content-left{float:left;background:orange;}
#site-content-right{margin:5px 0 5px 10px;float:left;background:blue;}
#site-content-left h1{margin:0;font-family:erevan;font-size:25px;color:#0463a7;}
#site-content-dproc {background:url('../images/site-dproc.png');width:490px;height:370px;padding:10px;}
#site-content-dproc:hover{background:url('../images/site-dproc-hover.png');}
#site-content-news{float:left;}
#site-content-social{float:left;}
#site-content-news  .site-news-grey {background:url('../images/site-news-background.png') no-repeat;width:270px;height:182px;float:left;padding:25px;margin:0 10px 10px 0;display: inline-block}
#site-content-social #social-twitter{background:url('../images/social-twitter.png') no-repeat;width:70px;height:70px;margin-bottom:5px;display:block;}
#site-content-social #social-youtube{background:url('../images/social-youtube.png') no-repeat;width:70px;height:69px;margin-bottom:5px;display:block;}
#site-content-social #social-facebook{background:url('../images/social-facebook.png') no-repeat;width:70px;height:72px;margin-bottom:5px;display:block;}
#site-content-social #social-google{background:url('../images/social-google.png') no-repeat;width:70px;height:70px;margin-bottom:5px;display:block;}
#site-content-social #social-dasaran{background:url('../images/social-dasaran.png') no-repeat;width:70px;height:262px;margin-bottom:5px;display:block;}
#site-content-grey-news{width:670px;}
#site-content-ushadrutyun{
    background:url('../images/content-ushadrutyun.png') no-repeat;
    width:198px;
    height:123px;
    padding:10px;
    word-wrap: break-word;
    font-weight:bold;
    text-align: center;
    font-family:erevan;
    overflow:hidden;
    color:#0463a7;
    margin:15px 0 0 0;
}



#site-content-ushadrutyun p {margin:0;}
#aaa {background:url('../images/news-calq.png') no-repeat;width:139px;height:78px;position:relative;top:-50px;}
#site-content-news h1 {margin:15px 0;font-family:erevan;font-size:25px;color:#0463a7;text-align:center;}
#corner-calq a {
    text-decoration:none;
    font-family:erevan;
    color:#0463a7;
}
#corner-calq div {
    -moz-transform: rotate(-30deg); 
    -ms-transform: rotate(-30deg); 
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg); 
    transform: rotate(-30deg);
    }
#corner-calq a:hover {text-decoration:underline;}


.slide-img {float:left;margin-right:10px;}
.slide-text {text-align:justify;font-size:15px;}
.slide-text {height:250px;word-wrap:break-word;}
.slide-read-more {float:right;}
.slide-read-more  a{    margin:80px 0 0 30px;-moz-transform: rotate(-30deg); 
    -ms-transform: rotate(-30deg); 
    -webkit-transform: rotate(-35deg);
    -o-transform: rotate(-30deg); 
    transform: rotate(-30deg);}

。解决方案

推荐答案

您忘记为清除类添加css属性

you forgot add css attribute for the clear class

.clear {clear:both }

这篇关于css问题清楚两个 - 大差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！