html - 右侧浮动框

Question

我目前正在创建一个网站，它有一个带有文本等的居中框。现在，我还想要一个漂浮在右侧的盒子，与我的主盒子有一点差距。我这里留个图，我画的红框就是我要制作的浮动框。

顺便提一句。蓝色框只是我不想要的图片上的审查框。

所以我的问题是，我如何制作这样的浮动框？我用不同的方法尝试了几次。在 CSS 中，我制作了一个盒子并赋予它属性 float:right; 但是当我这样做时，结果就是这样

任何帮助将不胜感激

Answer 1

演示

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

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

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

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

width : 100%;

如果你不需要第一个 div，

为第二个容器放置一些边距

前任 ..margin-left : 300px;

如果你不希望你的浮动框宽度是第三个容器的 100%，你也可以调整它

Answer 3

我最好的猜测是你最后有<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/