将一个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块布局的几个约束之一。