文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >重新排列HTML页面

问重新排列HTML页面
EN

Stack Overflow用户
提问于 2016-01-14 01:14:04
回答 2查看 26关注 0票数 0

从我的代码中可以看到，这4个部分是堆叠在一起的。如果有人能帮我把它们均匀地铺在页面上，那就太好了。这4个部分是:游戏的历史，雅达利，其他游戏，未来游戏。

​

代码语言：javascript
复制
.jumbotron h1 {
  color: #ffffff;
  font-size: 150px;
  font-family: Sans-serif;
  font-weight: bold;
  text-align: center;
  margin-top: 0px;
}
.jumbotron {
  background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
  position: absolute;
  left: 0px;
  top: 100px;
  height: 350px;
  display: block;
}
.nav li {
  display: inline;
  text-align: center;
  color: #ff0000;
  font-size: 50px;
  bottom: 350px;
  padding-left: 35px;
  font-family: Sans-serif;
}
.page ul {
  color: #000000;
  font-size: 20px;
  font-family: Calibri;
  padding-left: 75px;
  .page ul li {
    display: inline;
  }
  .page a {
    color: #000000;
    font-size: 15px;
    font-family: Calibri;
    padding-left: 70px;
  }
代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="home.css">
  <title>Gaming T,N & B</title>
</head>

<div class="jumbotron">
  <div class="container">
    <h1>Gaming: Then, Now & Beyond</h1>
  </div>
</div>


<body>


  <div class="nav">
    <div class="container">
      <ul>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">History of Gaming</a>
        </li>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Atari</a>
        </li>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Other Games</a>
        </li>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Future</a>
        </li>
      </ul>
    </div>
  </div>


  <style>
    div.img {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width: 180px;
    }
    div.img:hover {
      border: 1px solid #777;
    }
    div.img img {
      width: 100%;
      height: auto;
    }
    div.desc {
      padding: 15px;
      text-align: center;
    }
  </style>
  </head>

  <body>

    <div class="img">
      <a target="_blank" href="history.png">
        <img src="history.png" alt="The History of Gaming" width="300" height="200">
      </a>
      <div class="desc">
        <div class="page">
          <div class="container">
            <div>
              <div>
                <div>
                  <h3>History of Gaming</h3>
                  <ul>
                    <li>What is gaming?</li>
                    <li>Pong</li>
                    <li>Technology Boom</li>
                  </ul>
                  <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn more about the history of gaming</a>
                  </p>
                </div>
              </div>
            </div>

            <div class="img">
              <a target="_blank" href="atari.jpg">
                <img src="atari.jpg" alt="Atari" width="600" height="400">
              </a>
              <div class="desc">
                <div>
                  <h3>Atari</h3>
                  <ul>
                    <li>40 years of fun</li>
                    <li>Who is Nolan Bushnell</li>
                    <li>Bought & Sold</li>
                  </ul>
                  <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Learn more about Atari</a>
                  </p>
                </div>
              </div>
            </div>

            <div class="img">
              <a target="_blank" href="xbox_ps1.jpg">
                <img src="xbox_ps1.jpg" alt="Other Games" width="600" height="400">
              </a>
              <div class="desc">
                <div>
                  <h3>Other Games</h3>
                  <ul>
                    <li>PC</li>
                    <li>Xbox</li>
                    <li>PlayStation</li>
                  </ul>
                  <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn more about other games</a>
                  </p>
                </div>
              </div>
            </div>

            <div class="img">
              <a target="_blank" href="future_ocu.jpg">
                <img src="future_ocu.jpg" alt="Future Gaming" width="600" height="400">
              </a>
              <div class="desc">
                <div>
                  <h3>Future</h3>
                  <ul>
                    <li>Gaming in society</li>
                    <li>Who is driving who?</li>
                    <li>CrowdFunding</li>
                  </ul>
                  <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Learn about future gaming</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <iframe width="1150" height="315" src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=1" style="border:5px dotted red">
      </iframe>


  </body>

</html>

​

非常感谢

亚当

css
html
EN

回答 2

Stack Overflow用户

发布于 2016-01-14 01:22:05

您的HTML代码结构无效。我刚修改了一下。head标记被打开两次，style被放在主体中。body标签也被多次打开，并且一些div标签没有关闭。

​

代码语言：javascript
复制
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 100px;
height: 350px;
display: block;
}
.nav li {
display: inline;
text-align: center;
color: #ff0000;
font-size: 50px;
bottom: 350px;
padding-left: 35px;
font-family: Sans-serif;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
.page ul li {
display: inline;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="home.css">
      <title>Gaming T,N & B</title>
      <style>
         div.img {
         margin: 5px;
         border: 1px solid #ccc;
         float: left;
         width: 180px;
         }
         div.img:hover {
         border: 1px solid #777;
         }
         div.img img {
         width: 100%;
         height: auto;
         }
         div.desc {
         padding: 15px;
         text-align: center;
         }
      </style>
   </head>
   <body>
      <div class="jumbotron">
         <div class="container">
            <h1>Gaming: Then, Now & Beyond</h1>
         </div>
      </div>
      <div class="nav">
         <div class="container">
            <ul>
               <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">History of Gaming</a>
               </li>
               <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Atari</a>
               </li>
               <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Other Games</a>
               </li>
               <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Future</a>
               </li>
            </ul>
         </div>
      </div>
      <div class="img">
         <a target="_blank" href="history.png">
         <img src="history.png" alt="The History of Gaming" width="300" height="200">
         </a>
      </div>
      <div class="desc">
         <div class="page">
            <div class="container">
               <div>
                  <div>
                     <div>
                        <h3>History of Gaming</h3>
                        <ul>
                           <li>What is gaming?</li>
                           <li>Pong</li>
                           <li>Technology Boom</li>
                        </ul>
                        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn more about the history of gaming</a>
                        </p>
                     </div>
                  </div>
               </div>
               <div class="img">
                  <a target="_blank" href="atari.jpg">
                  <img src="atari.jpg" alt="Atari" width="600" height="400">
                  </a>
                  <div class="desc">
                     <div>
                        <h3>Atari</h3>
                        <ul>
                           <li>40 years of fun</li>
                           <li>Who is Nolan Bushnell</li>
                           <li>Bought & Sold</li>
                        </ul>
                        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Learn more about Atari</a>
                        </p>
                     </div>
                  </div>
               </div>
               <div class="img">
                  <a target="_blank" href="xbox_ps1.jpg">
                  <img src="xbox_ps1.jpg" alt="Other Games" width="600" height="400">
                  </a>
                  <div class="desc">
                     <div>
                        <h3>Other Games</h3>
                        <ul>
                           <li>PC</li>
                           <li>Xbox</li>
                           <li>PlayStation</li>
                        </ul>
                        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn more about other games</a>
                        </p>
                     </div>
                  </div>
               </div>
               <div class="img">
                  <a target="_blank" href="future_ocu.jpg">
                  <img src="future_ocu.jpg" alt="Future Gaming" width="600" height="400">
                  </a>
                  <div class="desc">
                     <div>
                        <h3>Future</h3>
                        <ul>
                           <li>Gaming in society</li>
                           <li>Who is driving who?</li>
                           <li>CrowdFunding</li>
                        </ul>
                        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Learn about future gaming</a>
                        </p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <iframe width="1150" height="315" src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=1" style="border:5px dotted red">
      </iframe>
   </body>
</html>

​

由于结构无效，CSS代码无法工作，现在尝试对文档进行布局，现在应该可以工作了。

票数 0
EN

Stack Overflow用户

发布于 2016-01-14 01:40:16

如果您将相同的技术应用于该部分，则James的答案可能仍然有效。从技术上讲，这是他的答案，我将提供另一种解决方案。你可以把这个添加到你的CSS中：

代码语言：javascript
复制
ul {text-align-justify}

或者，如果您只希望将该规则应用于该部分，则可以为该UL提供一个ID，并将其应用于CSS中的ID。

我还建议将h1部分向下移动到正文中。

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

https://stackoverflow.com/questions/34772922

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档