Html 将一个 div 定位到另一个的右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2431157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positioning one div to the right of another
提问by Jonno_FTW
I have the following html and css. But what I can't figure out is how to have the tabs div at the right of the main div. So that they stick out the right like bookmarks.
我有以下 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;}
And the html:
和 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>
回答by cletus
There are two general approaches to putting blocks left to right:
从左到右放置块的一般方法有两种：
- Make them inline; or
- Use floats.
- 使它们内联；或者
- 使用浮动。
(1) would be:
(1) 将是：
div.main, div.tabs { display: inline; }
(2) would be:
(2) 将是：
div.main, div.tabs { float: left; }
If you do (2) put the divs in a container and add:
如果您执行 (2) 将 div 放入容器中并添加：
div.container { overflow: hidden; }
Each method has particular merits. Most notably inlineelements can't have marginattributes applied to them. This is just one of the several constraints on inline vs block layout in HTML.
每种方法都有特定的优点。最值得注意的是inline元素不能margin应用属性。这只是 HTML 中内联与块布局的几个限制之一。
