Question

处理从移动设备扩展到桌面的简单网站布局。所有工作都按预期工作但我的浮动div不是出于某种原因集中在一起。我做过常规但这次不适合我吗？有什么想法吗？

所以继承我的CSS：

/* Smartphones (portrait) */


body{
    margin: 0;
    background-color: red;
}


/*Page layout*/


nav{
    background-color: blue;
    height: 100px;
}

header{
    height: 200px;
    background-color: #FFF; 
}

#wrapper{
    width:100%;
    padding: 30px;
}

.greenbartop{
    background-color: #005e48;
    padding: 30px 0px 30px 0px;
    width: 100%;
}

.greenbartop h2{
    text-align:center;
    color: #FFF;
    font-size: 20px;
}


.intromobile{
    background-color: #FFF;
    height: auto;
    padding: 60px 30px 60px 30px;
}

.intromobile p{
    text-align:justify;
    font-size: 20px;
    line-height: 30px;
}


.categorylist{
    background-color: #FFF;
    height: auto;
    padding: 20px;  
    text-align: center;
    overflow:auto;
    margin: 0 auto;
    width:100%;
}

.categorypost{
    height: 200px;
    background-color:red;
    margin-bottom: 20px;
    width: 380px;
    float:left;
    margin-right: 20px;
}

.greenbarbottom{
    background-color: #005e48;
    padding: 30px 0px 30px 0px;
    width: 100%;
}

.greenbarbottom h2{
    text-align:center;
    color: #FFF;
    font-size: 20px;
}


.spotlight{
    background-color: #FFF;
    height: auto;
    padding: 60px 30px 60px 30px;
}

.spotlight p{
    text-align:justify;
    font-size: 20px;
    line-height: 30px;
}

.spotlightpost{
    height: auto;
    background-color:green;
    margin-bottom: 20px;
    width: 360px;   
}

footer{
    background-color: #000;
    width: 100%;
    padding: 40px 0px 40px 0px;
}

footer p{
    color: #FFF;
    text-align:center;
}

/* Ipad (portrait) ----------- */
@media only screen and (min-width : 768px){

body{
    background-color: yellow;
}       

header{
    height: 400px;
    background-color: #FFF; 
}

greenbartop{
    background-color: #005e48;
    padding: 30px 0px 30px 0px;
    width: 100%;
}

.greenbartop h2{
    font-size: 24px;

}

.intromobile{
    display: none;
}

.intromobile p{
    display: none;
}

.categorylist{
    background-color: #FFF;
    width: 100%;
    height: auto;
    padding: 20px;  
    text-align: center;
    margin: 0 auto;
}


.categorypost{
    height: 200px;
    background-color:red;
    margin-bottom: 20px;
    width: 300px;
    float:left;
    margin-right: 25px;
}


.spotlight{
    background-color: #FFF;
    height: auto;
    padding: 60px 30px 60px 30px;
    overflow:auto;
}

.spotlight p{
    text-align:justify;
    font-size: 20px;
    line-height: 30px;
}

.spotlightpost{
    height: auto;
    background-color:green;
    margin-right: 10px;
    margin-bottom: 20px;
    float:left;
    width:300px;
}

}

/* Ipad (paysage) ----------- */
@media only screen and (min-width : 1024px){

body{
    background-color: blue;
}   

}

/* Desktop ----------- */
@media only screen and (min-width : 1224px){

body{
    background-color: green;
}


}

继承人html：

<body>

<nav></nav>

<header>




</header>




    <div class="greenbartop">

    <h2>Delivering results, not empty promises...</h2>



    </div>

    <div class="intromobile">

    <p>Experienced & Ethical Business Brokerage</p>

    <br />

        <p>Thank you for finding time to visit our website - if you are seriously thinking about buying or selling a business then we are here to help.</p>

        <br />

        <p>Experience counts for everything in business sales and the principle people at Ashley Tate have each been personally involved in business sales and acquisitions for more than twenty years.</p>

    </div>

    <div class="categorylist">


        <div class="categorypost">1</div>

        <div class="categorypost">2</div>

        <div class="categorypost">3</div>

        <div class="categorypost">4</div>

        <div class="categorypost">5</div>

        <div class="categorypost">6</div>


    </div>

    <div class="greenbarbottom">

    <h2>Business spotlights</h2>

    </div>

    <div class="spotlight">

    <div class="spotlightpost">  
        <h3>Business Name</h3>
        <p>Busines info</p>        
    </div>   

        <div class="spotlightpost">  
        <h3>Business Name</h3>
        <p>Busines info</p>        
    </div> 

        <div class="spotlightpost">  
        <h3>Business Name</h3>
        <p>Busines info</p>        
    </div> 
    </div>

<footer>
    <p>ashleyate</p>
    <p>Experienced & Ethical Business Brokerage</p>
</footer>

</body>

Answer 1

Codepen

JsFiddle

在float:left;中删除.categorypost并添加：

display:inline-block;
margin:0 auto;

集中浮动div

1 个答案: