Question

我有这个样本

代码HTML：

<div class="banner">

</div>


<div class="inner">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

CODE CSS：

.left,.main,.right{
    float:left;
    width:200px;
    height:100px;
}

.left{
    background:red;
}
.main{
    background:blue;
}
.right{
    background:aqua;
}

.banner{width:300px;background:yellow;height:100px;}

我想在右侧（.right）移动div以与div网站（横幅）保持一致，而不更改HTML代码（仅限CSS）。

我尝试在其他分辨率上添加margin-top:-6em看起来与众不同。

你可以帮我解决这个问题吗？提前谢谢！

Answer 1

如果您只能更改CSS，则必须使用margin-top:-6em代替clock_gettime(CLOCK_MONOTONIC,&start); /* ******PROGRAM CODE************* */ clock_gettime(CLOCK_MONOTONIC,&end);才能对齐。 https://jsfiddle.net/ck3pux8x/1/

但最好的解决方案是更改HTML以将.right div移动到.banner旁边的一个位置。并将.banner浮动到右边。 https://jsfiddle.net/ck3pux8x/2/

Answer 2

HI现在尝试定义您的body position relative和您的班级.right position absolute和left或{<1}} 。。

就像这样

top

演示

body{
position:relative;
}
.right {
    background: aqua;
    position: absolute;
    left: 400px;
    top: 0;
}

.right{
  position:absolute;
  left:400px;
  top:0;
 }
body{position : relative;}
.left,.main,.right{
    float:left;
    width:200px;
    height:100px;
}

.left{
    background:red;
}
.main{
    background:blue;
}
.right{
    background:aqua;
}

.banner{width:300px;background:yellow;height:100px;}

Answer 3

在这种情况下，您可以使用relative重新position：

.right{
    background:aqua;
    position: relative;
    top: -100px;
}

https://jsfiddle.net/ck3pux8x/4/

我怎么能超越这个div？CSS

3 个答案: