【问题标题】:HTML and CSS - Tribute page FCC troubleHTML 和 CSS - 致敬页面 FCC 麻烦
【发布时间】:2017-12-05 11:55:49
【问题描述】:

上面的链接是我为 FCC 挑战创建的致敬页面的 html 和 css。我在为.life.work div 添加填充时遇到了麻烦。

您也可以看到,我的文本不包含在 div 中。我已经用谷歌搜索这个问题几个小时了,所有的解决方案都对我不起作用。

谁能帮帮我?

理想情况下,我希望那些灰色的 div 稍微四舍五入,居中,文本限制在 div 中。

codepen

【问题讨论】:

  • 很抱歉格式不佳和缺乏可视化代码,这是我的第一篇文章,我确实为一些发帖规则而苦恼。
  • 嗨 Marchi,如果可能,请在您的问题中向我们提供 Stack Snippet,以便我们轻松重现您的问题。
  • 发布codepen链接时,这里也需要提供相关代码!
  • codepen.io/anon/pen/xrWrbR 你的意思是这样吗?
  • 我也不明白你的“问题”,我只是输入了 padding:40px;在两个课程中,它都有效

标签: html css margin padding


【解决方案1】:

你在寻找这样的东西吗?

body {
  margin-top: 60px;
}

img {
  border-radius: 10%;
  max-width: 50%;
  display: block;
  margin: auto auto 30px auto;
}

.life {
  background: darkgrey;
  max-width: 80%;
  margin: 20px auto;
  border-radius: 25%;
  padding: 25px 50px;
}

.work {
  background: darkgrey;
  max-width: 90%;
  margin: 20px auto;
  padding: 25px 50px;
}

.wiki {
  margin-top: 50px;
}
<div class="container">
  <div class="jumbotron">
    <h1 class="text-center">Zach Braff</h1>
    <h2 class="text-center"><em>Actor Director Writer Producer</em></h2>


    <img src="https://pbs.twimg.com/profile_images/588958455370625025/xm8yowKs.jpg" alt="Zach Braff">


    <div class="life">
      <h3 class="text-center">His life (summarised)</h3>
      <p>Born in 1975, Zach Braff grew up in New Jersey and began acting at an early age. He got his first acting job on a TV pilot at age 14, with his first film role coming a few years later. After graduating from Northwestern University's film school,
        Braff returned to acting, appearing in several small movies. His big break came in 2001 when he landed one of the lead roles on the TV comedy Scrubs. The show was a hit, and Braff became a household name. This success led to others, such as his
        writing, directing and starring in Garden State, a critically acclaimed indie film, and landing a role in 2013's big-budget movie Oz the Great and Powerful.</p>
    </div>

    <div class="work">
      <h3>His Work (some of)</h3>
      <ul>
        <li>Scrubs</li>
        <li>Garden State</li>
        <li>Oz the Great and Powerful</li>
        <li>Wish I Was Here</li>
        <li>Going In Style</li>
      </ul>
    </div>


    <p class="text-center wiki"><em>Read more about Zach Braffs life and work <a href = "https://en.wikipedia.org/wiki/Zach_Braff">here</a></em></p>

  </div>
</div>

<footer>
  <p class="text-center">Personal project for FCC's assignment 'Build a Tribute Page</p>
</footer>

【讨论】:

    【解决方案2】:

    你想要这样的东西吗?

    Solution

    变化:

    .life {
    background: darkgrey;
    max-width: 80%;
    margin: 20px auto;
    padding:4em;
    border-radius: 25%;
    }
    
    .work {
    background: darkgrey;
    max-width: 90%;
    padding:4em;
    margin: auto;
    }
    

    我刚刚为这两个类添加了填充,它起作用了!

    【讨论】:

      【解决方案3】:

      /* Styling the body element
      like body color and margin */
              
              body {
                  background-color: #f3f4f7;
                  /* margin: auto; */
                  /* width: 2000px; */
              }
      
              /* Styling the Title and giving
              shadow to the title */
              #title {
                  text-align: center;
                  text-shadow: 5px 5px 10px white;
                  font-size: 7vh;
              }
      
              /* Setting width and display
              type of image */
              img {
                  display: inline-block;
                  width: 100%;
              }
      
              /* Setting font color and font
              size of the image-caption */
              #caption {
                  font-size: 17px;
                  font-family: Gill Sans;
                  color: goldenrod;
                  text-align: center;
              }
      
              /* Styling the content of the page like-
              padding, font-soze, font color etc.*/
              div#tribute-data {
                  background-color: rgba(10, 140, 150, 0.25);
                  box-shadow: 20px 20px 20px #98FB98;
                  font-family: Georgia;
                  padding: 25px 25px;
                  margin: 11px;
                  margin-top: 50px;
              }
      
              /* Styling the title of the content */
              h1.title-APJ {
                  font-size: 35px;
                  color: white;
                  text-align: center;
                  text-shadow: 5px 5px 10px black;
              }
      
              /* Styling the link provided at the end */
              #tribute-link {
                  text-decoration: none;
                  color: black;
              }
      
              .head{
                  text-align: center;
                  color:gold;
                  text-transform: uppercase;
                  /* outline: 3px solid green; */
                  text-shadow: 5px 5px 10px green;
              }
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Dr. APJ Abdul Kalam</title>
          <!-- <link rel="stylesheet" href="/Main.css"> -->
          <style>
              /* Styling the body element
      like body color and margin */
              
              body {
                  background-color: #f3f4f7;
                  /* margin: auto; */
                  /* width: 2000px; */
              }
      
              /* Styling the Title and giving
              shadow to the title */
              #title {
                  text-align: center;
                  text-shadow: 5px 5px 10px white;
                  font-size: 7vh;
              }
      
              /* Setting width and display
              type of image */
              img {
                  display: inline-block;
                  width: 100%;
              }
      
              /* Setting font color and font
              size of the image-caption */
              #caption {
                  font-size: 17px;
                  font-family: Gill Sans;
                  color: goldenrod;
                  text-align: center;
              }
      
              /* Styling the content of the page like-
              padding, font-soze, font color etc.*/
              div#tribute-data {
                  background-color: rgba(10, 140, 150, 0.25);
                  box-shadow: 20px 20px 20px #98FB98;
                  font-family: Georgia;
                  padding: 25px 25px;
                  margin: 11px;
                  margin-top: 50px;
              }
      
              /* Styling the title of the content */
              h1.title-APJ {
                  font-size: 35px;
                  color: white;
                  text-align: center;
                  text-shadow: 5px 5px 10px black;
              }
      
              /* Styling the link provided at the end */
              #tribute-link {
                  text-decoration: none;
                  color: black;
              }
      
              .head{
                  text-align: center;
                  color:gold;
                  text-transform: uppercase;
                  /* outline: 3px solid green; */
                  text-shadow: 5px 5px 10px green;
              }
          </style>
      </head>
      
      <body>
          <main id="main">
              <header class="head"><h1>A Tribute Page</h1></header>
              <!-- Title of the page -->
              <h1 id="title">
                  A. P. J. Abdul Kalam
              </h1>
      
              <div id="img">
      
                  <!--Image of the Tribute Person-->
                  <img src="/220px APJ Addulkalam pic.jpg" id="image"
                      alt="Error Loading Image">
                  <small id="caption">
                      Great Indian scientist and
                      politician who played a leading
                      role in the development of India’s
                      missile and nuclear weapons
                      programs.
                  </small>
              </div>
      
              <div id="tribute-data">
      
                  <!--Achievements and other
                      details of the person-->
                  <h1 class="title-APJ">
                      About the Legend
                  </h1>
      
      <p>
                      - A.P.J. Abdul Kalam, in full
                      Avul Pakir Jainulabdeen Abdul Kalam,
                      was born on October 15, 1931, in
                      Rameswaram, Tamil Nadu, India.<br><br>
                      - He served as the 11th President
                      of India from 2002 to 2007.<br><br>
                      - Kalam earned a degree in
                      aeronautical engineering from the
                      Madras Institute of Technology and in
                      1958 joined the Defence Research and
                      Development Organisation (DRDO).<br><br>
                      - In 1969, he moved to the Indian
                      Space Research Organisation, where he
                      was project director of the SLV-III, the
                      first satellite launch vehicle that was
                      both designed and produced in India.
                      <br><br> - Rejoining DRDO in 1982,
                      Kalam planned the program that produced
                      a number of successful missiles, which
                      helped earn him the nickname <strong>
                      “Missile Man.”</strong>
                      <br><br> - Among those successes
                      was Agni, India’s first intermediate-range
                      ballistic missile, which incorporated
                      aspects of the SLV-III and was launched
                      in 1989.
                      <br><br> - He also played a
                      pivotal organisational, technical,
                      and political role in India's Pokhran-II
                      nuclear tests in 1998, the first since
                      the original nuclear test by India in 1974.
                      <br><br> - From 1992 to 1997 Kalam
                      was scientific adviser to the defense
                      minister, and he later served as principal
                      scientific adviser (1999–2001) to the
                      government with the rank of cabinet minister.
                      <br><br> - His prominent role in
                      the country’s 1998 nuclear weapons tests
                      solidified India as a nuclear power and
                      established Kalam as a national hero,
                      although the tests caused great concern
                      in the international community.
                      <br><br> - In 1998 Kalam put
                      forward a countrywide plan called
                      Technology Vision 2020, which he described
                      as a road map for transforming India from
                      a less-developed to a developed society
                      in 20 years. The plan called for, among
                      other measures, increasing agricultural
                      productivity, emphasizing technology as
                      a vehicle for economic growth, and
                      widening access to health care and
                      education.
                      <br><br> - Kalam received <b>7</b>
                      honorary doctorates from <b>40</b>
                      universities. The Government of India
                      honoured him with the <b>Padma Bhushan
                      in 1981</b> and the <b>Padma Vibhushan
                      in 1990</b> for his work with ISRO and
                      DRDO and his role as a scientific advisor
                      to the Government.
                      <br><br> - In 1997, Kalam received
                      India's highest civilian honour, the
                      Bharat Ratna, for his contribution to
                      the scientific research and modernisation
                      of defence technology in India.
                      <br><br> - In 2013, he was the
                      recipient of the Von Braun Award from
                      the National Space Society "to recognize
                      excellence in the management and leadership
                      of a space-related project".
                      <br><br> - While delivering a
                      lecture at the Indian Institute of
                      Management Shillong, Kalam collapsed and
                      died from an apparent cardiac arrest on
                      <b>27 July 2015</b>, aged 83.
                      <br><br> - Wheeler Island, a
                      national missile test site in Odisha, was
                      renamed <b>Kalam Island</b> in September
                      2015.
                      <br><br> - A prominent road in
                      New Delhi was renamed from Aurangzeb
                      Road to <b>Dr APJ Abdul Kalam Road</b>
                      in August 2015.
                      <br><br> - In February 2018,
                      scientists from the Botanical Survey
                      of India named a newly found plant
                      species as Drypetes kalamii, in his
                      honour.
                      <br><br>
                  </p>
      
              </div>
              <br>
                  <small>Developed by @<a href="#">
                      Divesh Mandhyan.</a></a>
              </small>
          </main>
      </body>
      
      </html>

      【讨论】:

      • 请补充说明
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-07-31
      • 1970-01-01
      相关资源
      最近更新 更多