问为什么照片是排列在列而不是网格(HTML + CSS)？
EN

Stack Overflow用户

提问于 2016-08-19 13:33:55

回答 3查看 49关注 0票数 0

好的，所以我遵循一个关于制作一个简单的投资组合网站的Treehouse教程。他们有照片，应该安排在一个网格。我用的是视频，但我试着转换图片，这并没有什么不同。我的照片都还在左边的一列，然后页脚在右边，一些照片应该在那里。我可以想象我遗漏了某种结束标记什么的，但我找不到。你介意看一下吗？谢谢。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Carter Goff | Portfolio</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Oswald:300,400,700' rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <a href="index.html"  id = "logo">
        <h1>Carter Goff</h1>
        <h2>Choreographer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="portfolio.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id = "gallery">
          <li>
            <a href="vid/vid1.mp4">
              <video controls>
                <source src="vid/vid1.mp4" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            </a>
            <a href="vid/vid1.mp4">
              <video controls>
                <source src="vid/vid1.mp4" type="video/mp4">
              Your browser does not support the video tag.
              </video>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://instagram.com/cartergoffofficial"><img src="img/instagram.png" alt="Instagram Logo"></a>
        <a href="https://www.facebook.com/carter.goff.52"><img src="img/facebook.png" alt ="Facebook Logo"></a>
        <p>&copy; 2016 Carter Goff</p>
      </footer>
    </div>
  </body>
</html>

和CSS：

/************************
GENERAL
*************************/

body {
  font-family: 'Open Sans Condensed', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

video{
  max-width: 100%;
}



/************************
HEADING
************************/

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Oswald', sans-serif;
  margin: 15px 0;
  font-size: 2em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/************************
NAVIGATION
************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}



/************************
FOOTER
************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}



/************************
PAGE: PORTFOLIO
************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}


/************************
COLORS
************************/

/* site body */
body{
  background-color: #fff;
  color: #b3b3b3;
}

/* pink header */
header{
  border-color: #ffb3ff;
  background: #000000;
}

/* nav background on mobile */
nav{
  background: #ffb3ff;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #00ffb3;
}

/* nav links */
nav a, nav a:visited {
  color: #000;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #b300b3
}

html

css

Stack Overflow用户

发布于 2016-08-19 13:40:52

这里有一个带有两个视频的li，但是通过查看css，我看到你有li {float: left; width: 45%; margin: 2,5%}，只有在有多个li的情况下才有意义，所以我假设您想要两个li，每个都有一个视频。如果我将您的li更改为结构，我刚才说您的li工作得很好：

/************************
GENERAL
*************************/

body {
  font-family: 'Open Sans Condensed', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

video{
  max-width: 100%;
}



/************************
HEADING
************************/

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Oswald', sans-serif;
  margin: 15px 0;
  font-size: 2em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/************************
NAVIGATION
************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}



/************************
FOOTER
************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}



/************************
PAGE: PORTFOLIO
************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}


/************************
COLORS
************************/

/* site body */
body{
  background-color: #fff;
  color: #b3b3b3;
}

/* pink header */
header{
  border-color: #ffb3ff;
  background: #000000;
}

/* nav background on mobile */
nav{
  background: #ffb3ff;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #00ffb3;
}

/* nav links */
nav a, nav a:visited {
  color: #000;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #b300b3
}

    <header>
      <a href="index.html"  id = "logo">
        <h1>Carter Goff</h1>
        <h2>Choreographer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="portfolio.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id = "gallery">
          <li>
            <a href="vid/vid1.mp4">
              <video controls>
                <source src="vid/vid1.mp4" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            </a>
          </li>
          <li>
            <a href="vid/vid1.mp4">
              <video controls>
                <source src="vid/vid1.mp4" type="video/mp4">
              Your browser does not support the video tag.
              </video>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://instagram.com/cartergoffofficial"><img src="img/instagram.png" alt="Instagram Logo"></a>
        <a href="https://www.facebook.com/carter.goff.52"><img src="img/facebook.png" alt ="Facebook Logo"></a>
        <p>&copy; 2016 Carter Goff</p>
      </footer>
    </div>

PS:我冒昧地将overflow: hidden;添加到#gallery中，以清除您的浮点数。

PS2:我在w3c验证器中运行了您的代码，以检查是否缺少关闭选项卡。它是一个很好的工具，非常有用，习惯使用它：input。它还提供了一些建议，例如，您的section缺少标题。

票数 1

查看全部 3 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39040417

复制

相似问题

问为什么照片是排列在列而不是网格(HTML + CSS)？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么照片是排列在列而不是网格(HTML + CSS)？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么照片是排列在列而不是网格(HTML + CSS)？
EN