簡體   English   中英

我的 div 嵌套在其他 div 中,但我不希望那樣,因為我很確定這就是導致我的框未對齊的原因。 有人對此有解決辦法嗎?

[英]my divs are nested in other divs but i dont want that, because im pretty sure thats what makes my boxes misaligned. anyone have a fix for this?

我是新來的,我正在為一項學校作業做這件事,今天到期,但我仍然可以編輯它,直到他標記它,這可能很快就會完成,但我的盒子沒有正確對齊,我認為它與 box3 div 有關嵌套在 box2 div 中,但我不確定。 任何人有任何修復?

<head>
    <title>Nikola Tesla Biography</title>
    <meta charset="utf-8">
     <style>
    #box1 {
        background: rgb(255, 255, 255);
        width: 900px;
        height: 1770px;
        border: 10px solid rgb(220, 220, 220)
      }
    </style>  
    <style>
      #box2 {
        background: rgb(245, 245, 245);
        width: 700px;
        height: 260px;
        border: 10px solid rgb(220, 220, 220)
      }
    </style>
    <style>
      #box3 {
        background: rgb(245, 245, 245);
        width: 700px;
        height: 400px;
        border: 10px solid rgb(220, 220, 220)
      }
    </style>
</head>
<center><div id="box1">
  <p>ㅤ</p>
  <h1><b><center>Nikola Tesla</center></b></h1>
  <center><img style = "border: 10px solid rgb(220, 220, 220);"     src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Tesla_circa_1890.jpeg/220px-Tesla_circa_1890.jpeg"width="200"></center>
<body style="background-color: rgb(235, 235, 235);">
  <p><center><b style ="font-size: 150%;"">A Biography Written By Sutton Helps.  </b></center></p>
  <p>ㅤ</p>
<center><div id="box2"><h3 style = "padding: 1.5%;">General Information</h3>
  <p>Born on July 10th 1856 in Smiljan Croatia (At the time Austro-Hungary   Empire).</p>
  <p>Died on January 7th 1943 in New York, United States of America.</p>
  <p>Dropped out of university at the age of 22.</p>
  <p>Was employed by Thomas Edison but later quit.</p>
  <p>He moved to America in 1884 with four cents to his name.</p>
  <p>ㅤ</p>
<div id="box3"><h3 style = "padding: 1.5%;">List of A Few Things He Invented</h3>
  <p>Tesla Coil</p>
  <p>Tesla Valve</p>
  <p>Radio</p>
  <p>Remote Control</p>
  <p>Wireless Communication</p>
  <p>Violet Ray</p>
  <p>Death Ray</p>
  <p>Shadowgraph (Basically X-Rays)</p>
  <p>Induction Coil</p>
  <p>ㅤ</p>
<p><b style ="font-size: 150%;">A Life Summary Of Nikola Tesla.</b></p>
<p>Born on July 10th 1856 in Smiljan Croatia, which at the time was a part of the Austro-Hungary Empire, Nikola Tesla was an inventor who made many things. The most useful/important ones as of today are wireless communication, the radio, remote control, and shadowgraph which was basically and x-ray. At the age of just 22, Tesla dropped out of university and moved to the United States of America with just four cents, a few of his own poems, and some great ideas. There, Tesla worked with people such as Thomas Edison and George Westinghouse. While working with Edison, he was told told he would receive $50,000 if he could improve the design for DC dynamos, but after doing so, Edison told Tesla that he was joking, and that he didn't understand American humor. After failing to start his own electric light company, Tesla found some supporters for his inventions, and after receiving more than 30 patents for his inventions, he caught the eyes of George Westinghouse, and started to work for him. However, Tesla prefered independent work and stopped working for both of them to pursue his own career in inventing, but due to lack of funds he was only able to invent so much. One of his biggest achievements was making the electric power station at Niagara Falls which made power for the city of Buffalo New York. Tesla later ended up dying on January 7th 1943 in New York.</p>
<p>ㅤ</p>
<center><b style ="font-size: 150%;">Sources:</b>
  <p></p>
    <a href="https://www.britannica.com/summary/Nikola-Tesla"> Britannica </a>
  <p></p>
    <a href="https://www.history.com/topics/inventions/nikola-tesla"> History </a>
  <p></p>
    <a href="https://theculturetrip.com/europe/serbia/articles/11-amazing-things-nikola-tesla-gave-the-world/"> Theculturetrip </a>
    </p></center>

問題絕對不是因為嵌套 div 元素,我無法理解你所說的錯位是什么意思,但這是你的代碼問題

box3 的高度比他的父親高(這使得它溢出了父親)

<center>元素已棄用 嘗試使用 CSS margin:auto代替 div((block level)) 元素 對於h1內的文本,您可以使用 CSS text-align:center

問題也可能是你的padding: 1.5%的結果,嘗試刪除它們,看看它是否能解決你的問題

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM