Html CSS 定位 - 两个元素相邻
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21672346/
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
CSS positioning - two elements next to each other
提问by Smajl
Ok, I know this question has been here at least hundred of times but this positioning is driving me crazy - can someone help me?
好的，我知道这个问题已经出现了至少数百次，但是这个定位让我发疯了 - 有人可以帮助我吗？
I have a portlet page (its basically html) with a table and a div tag. I would like to position them next to each other (table on the left, div on the right). Here are parts of my html:
我有一个带有表格和 div 标签的 portlet 页面（它基本上是 html）。我想将它们并排放置（左侧的表格，右侧的 div）。这是我的 html 的一部分：
<div id="page>
<table id="logtable">
...
</table>
<div id="divMessage>
...
</div>
</div>
...and CSS:
...和CSS：
#page {
width: 1200px;
margin: 0px auto -1px auto;
padding: 15px;
}
#logtable {
width: 800px;
float: left;
}
#divMessage {
width: 350px;
position:relative;
right:-5px;
top: -20px;
}
I have tried various positions - absolute, fixed, float etc, but I cant seem to get it right... Thanks for any help!
我尝试了各种位置 - 绝对、固定、浮动等，但我似乎无法正确...感谢您的帮助！
采纳答案by Matt The Ninja
You could use...
你可以用...
float: left;
on your div 'logtable'
在你的 div 'logtable'
I would advise using DIVs to do you alignment of content so wrap the table in a DIV. I also prefer to use inline-block over float left and gives more predictable results.
我建议使用 DIV 来对齐内容，因此将表格包装在 DIV 中。我也更喜欢使用 inline-block 而不是 float left 并提供更可预测的结果。
so...
所以...
<div id="page">
<div id="divTable" class="InsideContent">
<table id="logtable">
Left
</table>
</div>
<div id="divMessage" class="InsideContent">
Right
</div>
</div>
#page {
width: 1200px;
margin: 0px auto -1px auto;
padding: 15px;
}
.InsideContent{
display:inline-block;
}
}
#divTable {
width: 800px;
}
#divMessage {
width: 350px;
}
Code needs tidying up but you get the idea...
代码需要整理，但你明白了……
JSFiddle http://jsfiddle.net/3N53d/
JSFiddle http://jsfiddle.net/3N53d/
回答by Olaf Dietsche
回答by Adrian Enriquez
回答by Hamid Talebi
try this:
尝试这个：
<table id="logtable">
<tr>
<td>
table area
</td>
</tr>
</table>
<div id="divMessage">
div area
</div>
</div>
#page {
width: 800px;
margin: 0px auto -1px auto;
padding: 15px;
border:red solid 1px;
height:170px;
}
#logtable {
width: 400px;
height:150px;
float: left;
border: blue dashed 1px;
}
#divMessage {
width: 350px;
height:150px;
right:-5px;
top: -20px;
border: green dashed 1px;
float:right;
}
回答by Tonnao
In simple we can do like this:
简单来说，我们可以这样做：
table#logtable, div.divMessage{
display:inline-block;
}
Or
或者
table#logtable, div.divMessage{
float:left;
width:50%;
}
回答by Victor
I see that you forgot closing the quotes at <div id="page>, this might cause some problems, but basically you have to use:
我看到您忘记在 处关闭引号<div id="page>，这可能会导致一些问题，但基本上您必须使用：
float: left;
for the last div.
对于最后一个 div。
I have created this JSFiddlefor you to see if this fits your needs.
我已经为你创建了这个JSFiddle，看看这是否符合你的需求。
回答by Dropout
Use float:lefton the element which should be on the left and float:righton the right one. Keep in mind that if the sum of their widths exceeds the available space in the parent element they will be split into two lines anyway.
使用float:left这应该是在左边和元素float:right上是正确的。请记住，如果它们的宽度总和超过父元素中的可用空间，它们无论如何都会被分成两行。
回答by Dimag Kharab
Here you go , no need of right:-5px;
给你，不需要 right:-5px;
#divMessage {
width: 350px;
position: relative;
top: -20px;
float: left;
}
