html - 右侧 float 框

Question

我目前正在创建一个网站，该网站有一个带有文本等内容的居中框。现在，我还想要一个漂浮在右边的盒子，与我的主盒子有一点缝隙。留个图吧，我画的红框就是我要制作的 float 框。

顺便说一句。蓝色方框只是我不希望出现在图片上的经过审查的方框。

所以我的问题是，如何制作这样的 float 框？我用不同的方法尝试了几次。在 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;
}