Question

我遇到问题在fixed div中并排制作。我认为我可以将项目设置为relative并且它们会并排显示，但这并不起作用。

我有 HTML

<div class="tabs">
    <div class="feed-tab"></div>
    <div class="feed-tab"></div>
    <div class="feed-tab"></div>
</div>

这个 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;
}

但正在发生的事情是，.feed-tab div是彼此重叠的。我该怎么做才能让他们并肩坐在一起？

Answer 1

首先，您在容器上使用height:1px，在子元素上使用否定margin-top。为什么我不知道。

但是，relative并不意味着要素并排，而是需要更改display属性或使用float：

显示：内联块

喜欢这个http://jsfiddle.net/8wkmukv6/4/

或

float：left // float：right

喜欢这个http://jsfiddle.net/8wkmukv6/3/

Answer 2

CSS：创建一个类＆＃34;水平＆＃34;。对于每个孩子，显示为内联。

.horizontal * {
  display: inline;
}

HTML：包装课程中的所有元素＆＃34;水平＆＃34;，它们将并排显示。

<div class="horizontal">
  <b>Bold</b>
  <u>Underline</u>
  <i>Italic</i>
</div>

Div在固定div中显示在彼此之上

2 个答案: