我在HTML5和CSS3中构建的盒子模型的侧面被任何文本推倒

My sides on my box model built in HTML5 and CSS3 get pushed down with any text

本文关键字：侧面 任何 文本 模型 盒子 HTML5 CSS3 构建 我在      更新时间：2023-09-26

每当我尝试在内容中的主页正文中放置额外的文本时，它都会扭曲并基本上向下推倒我在侧面设置的侧边栏和广告框。这是一个课堂项目，我已经向老师寻求帮助，但她说代码基本上是好的，她不明白为什么要这样做。这是我的主页和 css 样式表的代码

.HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="dio.css">
        <link href='https://fonts.googleapis.com/css?  family=Exo:400,700italic' rel='stylesheet' type='text/css'>
        <script src="dio.js"></script>
        <style>
            #sidebar {
                background: olive;
                width: 20%;
                height: 1000px;
                float: left;
            }
            #advertising {
                background: olive;
                width: 20%;
                height: 1000px;
                float: right;
            }
            #footer {
                height: 50px;
                width: 1280px;
                background: black;
                text-align: center;
                clear: both;
            }
        </style>
    </head>
    <body>
        <header>
            `
            <div id="header" id="png">
                <h1>DIO INC</h1></div>
            <h3>Today is <span id = "dtField"></span>
              </h3>
        </header>
        <div id="sidebar">
            <h2>DIO WEBSITE</h2>
            <nav>
                <details>
                    <summary>Page Content</summary>
                    <ul>
                        <li>
                            <p>Please click <a href="dioPage2.html">About Us</a> to view our inoformation</p>
                        </li>
                        <li>
                            <p>Please click <a href="dioPage3.html">Services and Pricing</a> to view our services</p>
                        </li>
                        <li>
                            <p>Please click <a href="dioPage4.html">Contact Information</a> to view our contact information</p>
                        </li>
                    </ul>
                </details>
                <nav>
        </div>
        <div id="content">
        </div>
        <div id="advertising">
            <p>Please click
                <a href="http://www.ebay.com/sch/bananaman917_5/m.html?_nkw=&_armrs=1&_ipg=&_from="><img src="http://mssparky.com/wp-content/uploads/2010/11/ebay_logo.jpg" title=DIO width="150"></a> to view items for sale.</p>
        </div>
        <div id="footer"><strong>Copyright &copy 2016</strong></div>
        <script type="text/javascript">
            window.onload = initDate;
            function initDate() {
                var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
                var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
                var now = new Date();
                var dtString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate();
                document.getElementById("dtField").innerHTML = dtString;
            }
        </script>
    </body>
</html>

这是 CSS：

h1 {
  color:#ADFF2F;
  text-align: center;
  font-weight: bold;
}
h2 {
  color:#ADFF2F;
  text-align: lcenter;
  font-weight: bold;
}
p, strong, summary, section, h3 {
  color:#ADFF2F;
  font-weight: bold;
}
a {
  font-weight:bold;
  text-decoration:none;
}
a, h1, h2, p, strong, summary, section, h3 {
  font-family: 'Exo', sans-serif;
} 
a:link {
  color:#FF69B4;
}
a:active {
  color:#e03a3e;
}
a:hover {
  color:#e03a3e;
}
header {
  height:100px;
  width:1280px;
  background:black; 
  text-align: center;
  font-weight: bolder;
}
html {
  background:url('trees.jpg') #98FB98 no-repeat;
  background-size:cover;
}
body {
  width:1280px;
  height:1100px00px;
  background:rgba(0,0,0,0.4);
}
content {
  float:left;
  height:1000px;
}
table {
  width:1280px;
  Height:1000px;
}
table, th, td {
  border: 1px solid black;
  padding:5px;
  border-collapse:collapse;
  color:#00FF00; 
  font-weight: bold;
}
thead {
  background: #3056A0;
  color: white;
  font-weight: bold;
}
table > caption {
  font-weight: bold;
}
tfoot {
  font-size: 0.75em;
  text-align:right;
  font-weight: bold;
}
tbody tr:nth-child(even) {
  background: #808000;
  font-weight: bold;
}
tbody tr {
  background: #808000
  font-weight: bold;
}
footer {
  height:50px;
  width:1280px;
  background:black;
  text-align:center;
  clear:both;
}
您

缺少 CSS 中content的#，也像这样为内容添加宽度：

 #content {
   float: left;
   height: 1000px;
   width: 60%;
 }

例如，请参阅小提琴：https://jsfiddle.net/op2vbsww/1/

很简单。您的#content #sidebar和#advertising都是浮动left，并且都需要设置谨慎的宽度以确保它们适合您的容器（您的body充当包含宽度）。

您在#sidebar和#advertising上设置了宽度，但没有设置#content。因此，请添加宽度规则。

#content {
  float:left;
  box-sizing:border-box; <---
  display:inline-block; <--
  width:60%; <--
  height:1000px;
}

从本质上讲，您的内容水平扩展超过60%，并迫使块流中的下一个元素（#advertising）在您的#content下;您已经超过了100%的可用空间。

其他几件事：

  • box-sizing:border-box也是关于结构元素的好主意
  • 不要在正文上设置width。 使用包装元素包含特定大小的内容。
  • 找一位新老师。抱歉，但这些都是新手错误，您的"老师"应该能够轻松看到它们。
相关文章：