0

演示： http: //www.mindtale.com/portfolio.html

我想为投资组合部分打开一个可滚动的 3 x 4 网格。如何将网格内容调整为居中，距离顶部 150 像素，使其从标题下方开始？

投资组合.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style2.css"> 
<title>Mindtale Test Home</title>
</head>

<body>




<!-- Header -->

<div id="headerlogo">
<a href="index.html"><img src="images/logo.png"></a></div>

<div id="headerfill"></div>
<div id="header"></div>

<div id="headerlink1">

<a href="portfolio.html">Portfolio</a>
</div>

<div id="headerlink2">
<a href="contact.html">Contact</a>
</div>


<!-- Content -->

<div id="portfolio-grid">

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">BBC News</a></div>
    <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div>
    <div class="website-description">A popular destination for up-to-date news in the UK and around the World.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">EnviroGadget</a></div>
    <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div>
    <div class="website-description">One of Dan's websites focusing on the best of eco-friendly gadgets.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.google.co.uk" target="_blank">Google</a></div>
    <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div>
    <div class="website-description">The search engine that most people use.</div>
    <div class="website-clear"></div>
</div>
<br><br>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">BBC News</a></div>
    <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div>
    <div class="website-description">A popular destination for up-to-date news in the UK and around the World.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">EnviroGadget</a></div>
    <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div>
    <div class="website-description">One of Dan's websites focusing on the best of eco-friendly gadgets.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.google.co.uk" target="_blank">Google</a></div>
    <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div>
    <div class="website-description">The search engine that most people use.</div>
    <div class="website-clear"></div>
</div>

<br><br>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">BBC News</a></div>
    <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div>
    <div class="website-description">A popular destination for up-to-date news in the UK and around the World.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">EnviroGadget</a></div>
    <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div>
    <div class="website-description">One of Dan's websites focusing on the best of eco-friendly gadgets.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.google.co.uk" target="_blank">Google</a></div>
    <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div>
    <div class="website-description">The search engine that most people use.</div>
    <div class="website-clear"></div>
</div>

<br><br>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">BBC News</a></div>
    <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div>
    <div class="website-description">A popular destination for up-to-date news in the UK and around the World.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">EnviroGadget</a></div>
    <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div>
    <div class="website-description">One of Dan's websites focusing on the best of eco-friendly gadgets.</div>
    <div class="website-clear"></div>
</div>

<div class="portfolio-website">
    <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="BBC News"></a></div>
    <div class="website-name"><a href="http://www.google.co.uk" target="_blank">Google</a></div>
    <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div>
    <div class="website-description">The search engine that most people use.</div>
    <div class="website-clear"></div>
</div>






<!-- <div id="content">
<h2>A random heading</h2>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>

</div> -->

<!-- Footer -->

<div id="footer">
Mindtale &copy; 2013
</div>

</body>
</html>

样式.css

html { 
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
background: url(images/bg.jpg) no-repeat center center fixed; /* add background image */
-webkit-background-size: cover; /* fix height for other browsers */
-moz-background-size: cover; /* fix height for other browsers */
-o-background-size: cover; /* fix height for other browsers */
background-size: cover; /* fix height for other browsers */
}

/* Header */
/* -------------------------------------------------- */



div#header {
z-index:3;
position:fixed;
background: url(images/header.png) no-repeat center;
height: 102px;
top:0px;
left:0px;
width:100%;
padding: 0px;
}

div#headerfill {
z-index:4;
position:fixed;
background: url(images/headerfill.png) repeat-x;
height: 98px;
top:0px;
left:0px;
width:100%;
padding: 0px;
}

div#headerlink1 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:90%;
z-index:4;
position:fixed;
top:55px;
left:18%;
color:#999;
padding: 0px;
}

div#headerlink2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:90%;
z-index:4;
position:fixed;
top:55px;
left:78%;
color:#999;
padding: 0px;
}

div#headerlogo {
z-index:5;
position:fixed;
top:30px;
left:42%;
color:#999;
padding: 0px;
}

/* Content */
/* -------------------------------------------------- */

div#content {
position:fixed;
width:100%;
color:#222;
top: 70px; 
bottom: 0; 
left: 0; 
right: 0;
padding: 25px;
overflow: auto;



font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}


/* Footer */
/* -------------------------------------------------- */

div#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#999;
background:#333;
padding: 8px;
}

样式2.css

/* Grid Example */
#portfolio-grid .portfolio-website {
width: 300px;
float: left;
height: 245px;
border: 1px solid #BAD4E3;
background: #E3EAF2;
text-align: left;
margin: 15px;
}
#portfolio-grid .website-description {
text-align: left;
}
#portfolio-grid .website-name {
font-size: 10pt;
}
#portfolio-grid .website-url {
display: none;
}
#portfolio-grid .website-thumbnail {
float: none;
text-align: center;
margin: 3px auto 10px;
}
#portfolio-grid .footer {
clear: both;
}
4

4 回答 4

1

尝试这个：

#portfolio-grid{
   margin: 100px auto 0;
    width: 998px;
}
于 2013-04-18T17:20:46.170 回答
1

因为您使用的是浮动，所以您必须制作容器overflow: hidden或overflow: auto让它们适合他们的孩子。然后，用margin: 0 auto它来居中。我注意到您已经设置了top: 300px-#gridcontainer为了使其生效，您必须设置positionattritube。在这里，我将其设置为，relative因为您仍然需要依赖自动边距：

#gridcontainer {
    top: 150px;
    position: relative;
    overflow: hidden;
    width: 996px;
    margin: 0 auto;
}
于 2013-04-18T17:21:54.987 回答
1

有时 usingdisplay:inline-block比 更合适float，试试这个：

#portfolio-grid {
padding:150px 0 80px;
 text-align:center;
}

#portfolio-grid .portfolio-website {
    background: none repeat scroll 0 0 #E3EAF2;
    border: 1px solid #BAD4E3;
    display: inline-block;
    height: 245px;
    margin: 15px;
    text-align: left;
    vertical-align: top;
    width: 300px;
}

（上的填充#portfolio-grid是可选的）

于 2013-04-18T18:08:29.263 回答
1

您将需要重新考虑 CSS 浮动的使用。我不确定为什么要浮动整个#portfolio-grid容器，但最好通过在其上设置显式宽度（宽度：1024px；可能是一个很好的起点）然后将左右边距设置为自动来更好地服务。这将使您的容器居中。

例子：

#portfolio-grid {
  margin: 25px auto;
}

这是 margin 属性的简写 CSS，表示将顶部和底部边距设置为 25px，然后将左右边距设置为auto.

于 2013-04-18T17:16:02.723 回答