如何制作2列,右侧有1个绝对固定

时间:2017-02-06 18:48:40

标签: jquery html css

如何与http://music.yandex.ru相同的页面? 它有2列。一个带容器,另一个固定在右侧。什么框架更适合它?我在css中绝对是菜鸟。

1 个答案:

答案 0 :(得分:0)

.container {
  position: relative;
}
.right {
  float: right; 
  width: 100px;
  background-color: #ccc;
  border: 1px solid black;
  border-radius: 4px;
  padding:10px;
}
.main {
  float: left;
  width: 400px;
  background-color: #e1e1e1;
}
<div class="container">
  <div class="main">
    <p>Bacon ipsum dolor amet meatloaf pig meatball andouille short loin. Tail burgdoggen ribeye andouille leberkas, capicola alcatra fatback tongue tri-tip. Bresaola drumstick short ribs, kielbasa alcatra porchetta sirloin tail beef ribs jowl shoulder tongue
      andouille t-bone. Turkey chuck tail filet mignon pig brisket, jowl ribeye swine ground round shoulder. Ground round kielbasa brisket bresaola turducken bacon rump alcatra landjaeger short loin prosciutto kevin pork belly andouille pastrami.
    </p>
    <p>
      Pig rump shankle salami meatball tongue pork loin alcatra sausage shank. Kielbasa short ribs sirloin ground round cupim. Filet mignon sirloin meatball tenderloin tail shank. Shank ham hock tri-tip pork shankle sausage venison burgdoggen ground round.</p>
  </div>
  <div class="right">
    <p>Bacon ipsum dolor amet frankfurter meatball shankle corned beef short loin pork belly. Ham doner beef t-bone. Burgdoggen ham hock andouille shank boudin. Strip steak chicken doner turkey shoulder sirloin. Strip steak meatloaf prosciutto, salami sausage
      swine pork loin drumstick. Chicken strip steak chuck beef, tail salami frankfurter shoulder short ribs ribeye.</p>
  </div>
</div>