[英]Divs display on top of each other in fixed div
I am having issues making items side by side in a fixed
div. 我在fixed
div中并排放置项目时遇到问题。 I thought that I could set the items to relative
and they would display side by side, but that doesn't work. 我以为可以将项目设置为relative
并且它们可以并排显示,但这是行不通的。
jsfiddle: http://jsfiddle.net/8wkmukv6/ jsfiddle: http : //jsfiddle.net/8wkmukv6/
I have this HTML 我有这个HTML
<div class="tabs">
<div class="feed-tab"></div>
<div class="feed-tab"></div>
<div class="feed-tab"></div>
</div>
And this CSS 而这个CSS
.tabs{
position: fixed;
bottom: 0;
right: 10px;
left: 10px;
border: solid 1px red;
float: right;
height: 1px;
}
.feed-tab{
width: 100px;
height: 200px;
margin-top: -200px;
background-color: #ffffff;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
position: relative;
margin-right: 10px;
}
But what is happening, is that that .feed-tab
div's are sitting on top of each other. 但是正在发生的是, .feed-tab
div相互.feed-tab
。 what can I do to make them sit side by side? 我该怎么做才能让他们并排坐着?
First at all you are using height:1px
on the container and negative margin-top
on child elements. 首先,您在容器上使用height:1px
,在子元素上使用负的margin-top
。 Why I don't know. 为什么我不知道。
But make relative
doesn't mean the elements will be side by side instead you need to change the display
property or use float
: 但是make relative
并不意味着元素会并排,而是需要更改display
属性或使用float
:
display:inline-block 显示:行内块
Like this http://jsfiddle.net/8wkmukv6/4/ 像这样http://jsfiddle.net/8wkmukv6/4/
or 要么
float:left // float:right float:left // float:right
Like this http://jsfiddle.net/8wkmukv6/3/ 像这样http://jsfiddle.net/8wkmukv6/3/
CSS: Create a class "horizontal". CSS:创建一个“水平”类。 For every child, display as inline. 对于每个孩子,显示为嵌入式。
.horizontal * {
display: inline;
}
HTML: Wrap any elements in class "horizontal", they will appear side by side. HTML:将“水平”类中的所有元素包装起来,它们将并排出现。
<div class="horizontal">
<b>Bold</b>
<u>Underline</u>
<i>Italic</i>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.