将一个div定位到另一个div的右侧

Question

我有以下html和CSS.但我无法弄清楚的是如何在主div的右侧设置标签div.所以他们像书签一样伸出正确的位置.

.main {
    -moz-border-radius:10px;
    height: 75%;
    width: 60%;
    position: absolute;
    top: 15%;
    left: 20%;
    right: auto;
  }
.tabs {
    width: 50px;
    height: 1.3em;
    position: absolute;
    float: right;
}
 #tab { margin: 10px 10px 10px 0px;}

和HTML:

<div class="main">
    <div id="content">
       Some main content
    </div>
 </div>
 <div class="tabs">
     <div class="tabs" id="tab1">
         <a href="#" alt="Home">
             Home
         </a>
      </div>
      <div class="tabs" id="tab2">
          <a href="#" alt="About">
              About
          </a>
      </div>
</div>

Answer 1

从左到右放置块的方法有两种:

1. 让它们内联; 要么
2. 使用浮动.

(1)将是:

div.main, div.tabs { display: inline; }

(2)将是:

div.main, div.tabs { float: left; }

如果你这样做(2)将div放在一个容器中并添加:

div.container { overflow: hidden; }

每种方法都有其独特之处.最值得注意的是,inline元素不能margin应用属性.这只是HTML中内联vs块布局的几个约束之一.