Question

我不知道如何在css右侧使用侧边栏？有很多错误和错误在哪里错了。请更正并确保图片为侧边栏的背景。 HTML：

＆＃13;

body {
  margin: 0;
  padding: 0;
  line-height: 1.7em;
  letter-spacing: 1px;
  font-family: Perpetua, "Times New Roman", Times, serif;
  font-size: 12px;
  color: #333;
  background: #86d8bc url(gambar/seni.png) repeat-x top;
}

a:link,
a:visited {
  color: #dd0034;
  text-decoration: none;
  font-weight: normal;
}

a:active,
a:hover {
  color: #990099;
  text-decoration: underline;
}

#debar {
  float: right;
  width: 20%;
  padding: 15px 22px 15px 24px;
  background: url(gambar/debar.jpg);
}

＆＃13;

<center>
  <h3> Tour Akhir Pekan </h3> <b> Liburan gak pake bethal <p> Ribet dan Mahal </b> </p>
  <div id="debar">
    <div class="debar_top"> </div>
  </div>
  <P style="border:solid 1px #123; width:900px; height: 30px; padding: 15px; margin:0; text-align:justify;line-height:23px; color: black;font-size: 18px"> Bingung Pilih Habiskan Waktu Dimana Saat Liburan? <br> <a href=""> Klik</a> untuk Referensi </br>
    <h3 style="border:solid 1px #aab; width:900px; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius:15px; margin:2; text-align:justify;line-height:50px; color: black;font-size: 18px">Pesona Alam Indonesia yang wajib untuk dijelajahi! </h3>
    <h4 style="border:solid 1px violet; width:900px; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius:15px; margin:5; text-align:justify;line-height:50px; color: black;font-size: 18px">Hotel di Indonesia dengan Pemandangan yang Menakjubkan</h4>
</center>

＆＃13;

Answer 1

我建议使用main容器，内容的section子容器和侧边栏内容的aside容器。您应用的HTML似乎来自一个非常旧的规范（您已经包含了center元素和bgcolor属性等不再使用的属性。我还建议你read up on new HTML5 elements更加语义化。

main{
  height:400px;
}

main > section{
  width:80%;
  float:left;
  height:100%;
  background:blue;
}

main > aside{
  width:20%;
  float:left;
  height:100%;
  background:red;
}

<main>
  <section></section>
  <aside></aside>
</main>

Answer 2

试试这个，不要使用修复宽度值......

＆＃13;

body {
  margin: 0;
  padding: 0;
  line-height: 1.7em;
  letter-spacing: 1px;
  font-family: Perpetua, "Times New Roman", Times, serif;
  font-size: 12px;
  color: #333;
  background: #86d8bc url(gambar/seni.png) repeat-x top;
  height: 100%;
}

html {
  height: 100%;
}

a:link,
a:visited {
  color: #dd0034;
  text-decoration: none;
  font-weight: normal;
}

a:active,
a:hover {
  color: #990099;
  text-decoration: underline;
}

.right-block {
  float: right;
  width: 20%;
  height: 100%;
}

.left-block {
  float: left;
  width: 80%;
}

#debar {
  height: 100%;
  padding: 15px 22px 15px 24px;
  background: red;
}

＆＃13;

<div class="left-block">
  <center>
    <h3> Tour Akhir Pekan </h3> <b> Liburan gak pake bethal <p> Ribet dan Mahal </b> </p>
    <P style="border:solid 1px #123; height: 30px; padding: 15px; margin:0; text-align:justify;line-height:23px; color: black;font-size: 18px"> Bingung Pilih Habiskan Waktu Dimana Saat Liburan? <br> <a href=""> Klik</a> untuk Referensi </br>
      <h3 style="border:solid 1px #aab; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius:15px; margin:2; text-align:justify;line-height:50px; color: black;font-size: 18px">Pesona Alam Indonesia yang wajib untuk dijelajahi! </h3>
      <h4 style="border:solid 1px violet; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius:15px; margin:5; text-align:justify;line-height:50px; color: black;font-size: 18px">Hotel di Indonesia dengan Pemandangan yang Menakjubkan</h4>
  </center>
</div>
<div class="right-block">
  <div id="debar">
    <div class="debar_top"></div>
  </div>
</div>

＆＃13;

我不能让侧边栏没有浮动内容

2 个答案: