Question

看起来像我有停电。你可以在图片中看到她，我希望在标题的右侧有一个简报的方框。但如果我向右或向左浮动标题已经消失，如果我给头部绝对或相对的位置也一样。

通常我没有漂浮的问题，但看起来我在假期期间失去了一些东西。

<div class="main">

<div id="header">
    <div class="headcontainer"><h3>Newsletter</h3></div>
</div>

.main{
    width: 1060px;
    position: relative;
    margin:80px auto;
}

#header{
    width: 1060px;
    margin: 0auto;
    background: #fff;
    clear :both;
    position: relative;
}

.headcontainer {
    /*float:;*/
}

Answer 1

这是因为当你浮动时，标题中不再有height。所以给标题一个高度和它的罚款。

注意： border + width + height只是为了向您展示它的位置。

DEMO HERE

<强> CSS：

#header {
    width:1060px;
    height: 30px;
    margin:0 auto;
    background:#fff;
    position:relative;
}
.headcontainer {
    float:right;
    width: 200px;
    height: 100px;
    border: 1px solid;
}

Answer 2

您是否尝试过将内容容器设置为text-align:right;

这似乎为我得到了理想的结果：）

那将是：

#header{
width:1060px;
margin:0 auto;
background:#fff;
clear:both;
position:relative;
text-align:right;
}

在头部内侧浮动div盒

2 个答案: