Question

所以我得到了这个小提琴：http://jsfiddle.net/69WVx/3/

我还附上了代码。基本上，我希望test2和test3彼此内联。我还希望test2和test3的宽度为％，因为它是一个移动响应按钮。

这可以按照我的方式完成吗？或者我搞砸了这一切？

正如您所看到的，DIV的test2和test3相互重叠，而不是内联。

HTML：

<div class="test">
    <div class="test1">
        <div class="test2">ORANGE</div>
        <div class="test3">APPLE</div>
    </div>
</div>

CSS：

.test {
    position: relative;
    width: 300px;
    height: 100px;
    border: 1px solid #FF0000;
}
.test1 {
    width: 90%;
    height: 50%;
    border: 1px solid;
    position: relative;
}
.test2 {
    width: 40%;
    border: 1px solid #00FF00;
    display: inline;
    position: absolute;
}
.test3 {
    width: 40%;
    border: 1px solid;
    display: inline;
    position: absolute;
}

Answer 1

尝试这样的事情，尽力帮助。

不知道这是不是你想要的。 Fiddle

如果你想保持绝对位置，请执行以下操作

.test2 {
    width: 40%;
    border: 1px solid #00FF00;
    display: inline-block;
  position :absolute;
}
.test3 {
    width: 40%;
    border: 1px solid;
    display: inline-block;
    position :absolute;
    margin-left:40%;
    }

或即使这样做也会

.test2 {
    width: 40%;
    border: 1px solid #00FF00;
    display: inline-block;
}
.test3 {
    width: 40%;
    border: 1px solid;
    display: inline-block;

}

Answer 2

CSS中的position:absolute属性导致.test2和.test3显示在彼此之上。从这两个元素中删除该属性可提供您正在寻找的内联外观。

另外，作为Jc。请在下面指出，display属性应设置为inline-block而不是inline

.test2 {
    width: 60%;
    border: 1px solid #00FF00;
    display: inline-block;
} 
.test3 {
    width: 30%;
    border: 1px solid;
    display: inline-block;
}

http://jsfiddle.net/69WVx/11/

Answer 3

将display: inline-block;应用于内部块，例如 .test2 和 .test3 ，以便您可以实现此目的。

检查此Fiddle ...

<强> CSS：

.test {
    position: relative;
    width: 300px;
    height: 100px;
    border: 1px solid #FF0000;
}
.test1 {
    width: 90%;
    height: 50%;
    border: 1px solid;
    position: relative;
}
.test2 {
    width: 40%;
    border: 1px solid #00FF00;
    display: inline-block;
}
.test3 {
    width: 40%;
    border: 1px solid;
    display: inline-block;
}

Answer 4

试试这个：

Demo

你的错误是：

1.您允许.test2＆amp; .test3位置：绝对，这会导致它们从正常流程中删除。如果您没有定义顶部，左侧，右侧，在元素的底部，它们当然会相互覆盖。但是，你不需要使用＆＃34; position＆＃34;这里。

2.Div应显示为内联块。内联元素不具有宽度或高度属性。所以你可以看到你让div width:40%，它不起作用。让他们display:inline-block;

Answer 5

这就是我试过的，我想这就是你想要的......

HTML：

<div class="test">
    <div class="test1">
        <div class="test2">ORANGE</div>
        <div class="test3">APPLE</div>
    </div>
</div>

CSS：

.test {
    position: relative;
    width: 300px;
    height: 100px;
    border: 1px solid #FF0000;
}
.test1 {
    width: 90%;
    height: 50%;
    border: 1px solid;
    position: relative;
}
.test2 {
    width: 40%;
    border: 1px solid #00FF00;
    display: inline-block;
    position: relative;
}
.test3 {
    width: 40%;
    border: 1px solid;
    display: inline-block;
    position: relative;
}

这里是小提琴----＆gt; DEMO

它重叠的原因是因为你已将它定位为绝对......要么给出相对定位，要么为绝对布局提供定位以获得你想要的东西......

使用百分比的CSS DIV

5 个答案: