Question

我的旁边栏看起来非常舒服，坐在下面我的内容，在页面的左侧。我怎么能说服它留在它旁边？它应该是页面的右侧，内容在左侧。我一直在尝试类似问题的先前答案，没有任何改变我得到的结果。 How to pass int array as an argument to a constructor?

CSS：

<body bgcolor="#ffffff">

<div id="header">
<h1><center>header image here</center></h1>

<div id="navbar">
<p style="color:#14004d">
Home&emsp;&emsp;&emsp; Services&emsp;&emsp;&emsp;     Portfolio&emsp;&emsp;&emsp; Testimonials
</p>
</div>

<div id="section">
text text text text text text text text text text text text text text text
</div>

<div id="sidebar">
<p style="color:#ffffff">
contact info will be listed here.</p>
</div>


<div id="footer">
Copyright © Cassidy v. Ros Online Marketing Solutions 
</div>

</body>

HTML：

.heading-text-box

This is what I would like the basic format to appear as.

Answer 1

请考虑使用百分比宽度（除#section { /* ... */ width: 70%; box-sizing: border-box; /* ... */ } #sidebar { /* ... */ width: 30%; box-sizing: border-box; /* ... */ }样式外）。

#header {
  background-color: #ffffff;
  color: white;
  text-align: center;
  padding: 5px;
}
#navbar {
  background-color: #ffffff;
  color: #000000 text-align: left;
  padding: 5px;
}
#section {
  background-color: #ffffff;
  width: 70%;
  box-sizing: border-box;
  float: left;
  padding: 10px;
}
#sidebar {
  line-height: 30px;
  background-color: #14004d;
  height: 300px;
  width: 30%;
  box-sizing: border-box;
  float: right;
  padding: 5px;
}
#footer {
  background-color: #14004d;
  color: #ffffff;
  clear: both;
  text-align: center;
  padding: 5px;
}

<body bgcolor="#ffffff">

  <div id="header">
    <h1><center>header image here</center></h1>
  </div>

  <div id="navbar">
    <p style="color:#14004d">
      Home&emsp;&emsp;&emsp; Services&emsp;&emsp;&emsp; Portfolio&emsp;&emsp;&emsp; Testimonials
    </p>
  </div>

  <div id="section">
    text text text text text text text text text text text text text text text
  </div>

  <div id="sidebar">
    <p style="color:#ffffff">
      contact info will be listed here.</p>
  </div>


  <div id="footer">
    Copyright © Cassidy v. Ros Online Marketing Solutions
  </div>

</body>

(?<=^.).*

Answer 2

尝试将侧边栏块放在内容块之前。就像它一样，它会在绘制内容元素之前首先评估浮动视图。

float：右侧边栏喜欢坐在我的内容之下

2 个答案: