浮动框在右边

Question

我目前正在创建一个网站，其中有一个带文字的中心框等。 现在，我还想要一个漂浮在右侧的盒子，与我的主盒子有一点间隙。 我在这里留下一张照片，我画的红色盒子是我想制作的浮动盒子。

顺便说一下。蓝盒子只是一个我不想要的审查框。

所以我的问题是，我如何制作这样的浮箱？ 我用不同的方法尝试了几次。 在CSS中，我已经制作了一个盒子并给它了属性float：right; 但是，当我这样做时，它就像这样

非常感谢任何帮助

Answer 1

的 DEMO

您可以通过使用width技术定义其margin: 0 auto;来保持元素中心对齐。这将确保您的中心div位于中心，然后您可以使用position: absolute在偏移位置创建另一个框。

<强> HTML：

<div class="main-wrapper">
    <div class="main">This is in center position.</div>
    <div class="side">This is in offset position.</div>
</div>

<强> CSS：

body {
    background: #333;
    color: #fff;
}
.main-wrapper {
    position: relative;
    margin: 0 auto;
}
.main, .main-wrapper {
    width: 500px;
}
.main {
    border: 1px solid #f00;
    min-height: 500px;
}
.side {
    width: 200px;
    border: 1px solid #f00;
    min-height: 200px;
    position: absolute;
    top: 60px;
    right: -300px;
}
.main, .side {
    text-align: center;
    padding: 10px;
}

Answer 2

我最好的猜测是你最后有<div> float: right;。保留在第一个代码中。这样它就能正确浮动。我会这样编码：

<div class="right">Right</div>
<div class="main">
  Main Contents
</div>

CSS将是：

.right {float: right; width: 20%;}
.main {margin: auto; width: 60%;}

预览：

小提琴：http://jsfiddle.net/praveenscience/8WHyp/

Answer 3

你可以拥有主容器display : inline-block

每个子容器的宽度为width : 30%;

和第三个子容器内的浮动框的宽度为

width : 100%;

如果你不需要第一个div，

为第二个容器添加一些余量

ex .. margin-left : 300px;

如果您不希望您的浮动框宽度为第3个容器的100％，您也可以调整它