gpt4 book ai didi

html - 集中 float div

转载 作者:太空宇宙 更新时间:2023-11-03 23:40:50 27 4
gpt4 key购买 nike

致力于从移动设备扩展到桌面设备的简单网站布局。一切都按预期工作,但由于某种原因,我的 float 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>

最佳答案

Codepen

JsFiddle

去掉 .categorypost 中的 float:left; 并添加:

display:inline-block;
margin:0 auto;

关于html - 集中 float div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22935062/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com