为什么照片排列在列而不是网格（HTML + CSS）？

时间：2016-08-19 13:33:55

标签： html css

好的，所以我正在按照树屋教程制作一个简单的投资组合网站。他们有照片应该排列成网格。我正在使用视频，但我尝试切换图片，这没有任何区别。我的照片仍然在左侧的列中，然后页脚位于右侧，其中一些照片应该是。我会想象我错过了某种结束标签或其他东西，但我找不到它。你介意看看吗？谢谢。

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
}

3 个答案:

答案 0 :(得分：1)

你有一个li，其中有两个视频，但是通过查看css，我看到你有li {float: left; width: 45%; margin: 2,5%}，只有当有多个li时才会有意义，所以我会假设你想要两个li个，每个视频一个。如果我将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;
  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验证程序运行您的代码，以检查是否缺少关闭选项卡。这是一个很好的工具并且帮助很多，习惯使用它：https://validator.w3.org/#validate_by_input。它还提供了建议，例如您的section标题缺失。

答案 1 :(得分：0)

我认为你错过了将图像分成2＆＃34; li＆＃34;而不是两者都在同一个＆＃34; li＆＃34;

答案 2 :(得分：0)

您的视频都在同一个li。但是根据你的样式表定义，你应该将它们单独放在li中。

代码 

                Your browser does not support the video tag.
            </video>
          </a>
          <a href="vid/vid1.mp4">

应更改为 

                Your browser does not support the video tag.
            </video>
          </a>
        </li>
        <li>
          <a href="vid/vid1.mp4">


/************************
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
}
<!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>
        </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>
</body>

</html>

相关问题
最新问题