当第二个浮动右边时，浮动中心的右边元素

Question

我在页面底部添加了固定条，首先我有100％宽度的固定容器，其中包含2个元素。第一个是内容，第二个关闭吧。

欲第一元件，即，“mixtext”在酒吧中居中，和第二元件，关闭按钮为始终在正确的，我想他们是在同一行上。你能建议我该怎么做？

下面是HTML代码：

<div id="mixwrap"> 
    <span id="mixtext"> 
    [Text that needs to be centered within the space from left to the next element] 
    </span> 
    <span id="mixclose"> 
    <input type="button" id="mixclosebut" onclick="document.getElementById('mixwrap').style.display = 'none';"> 
    </span> 
</div> 

和CSS：

#mixwrap { 
    left: 0; 
    bottom: 0; 
    position: fixed; 
    width: 100%; 
    background: #555; 
    color: white; 
} 

#mixtext { 
    text-align: center; 
    padding: 8px; 
    font-family: MetaBold, "Trebuchet MS", sans-serif; 
    float: left; 
} 

#mixclose { 
    cursor: pointer; 
    float: right; 
} 

另外，我要记住用户的选择，当有人点击关闭按钮，JS只是设置显示：没有了元素，但是当用户导航到其他页面时，div会再次显示。如何隐藏它以便用户在导航到其他页面后不会看到它？

在此先感谢。从#mixtext CSS

<div id="mixwrap"> 
    <div id="mixclose"><input type="button" id="mixclosebut" 
     value="Test" onclick="document.getElementById('mixwrap').style.display = 'none';"> 
    </div> 

    <div id="mixtext"> 
    [Text that needs to be centered within the space from left to the next element] 
    </div> 
</div> 

并删除float: left：

Answer 1

互换#mixclose和#mixtext的位置，并改变他们的div

#mixtext { 
    text-align: center; 
    padding: 8px; 
    font-family: MetaBold, "Trebuchet MS", sans-serif; 
} 

现在#mixtext将扩大到100％它可用空间和#mixclose将向右侧漂移。

编辑：

在问候你的最后一个问题，要记住用户的设置来显示#mixtext与否，你就必须要么使用cookies或服务器端语言。

Answer 2

#mixtext - 跨越扩大其内容的大小，所以text-align:center是没有意义的。元素中没有空白，所以文本将始终在包装中“居中”。

#mixtext需要是为了遏制白色空间的DIV。

的DIV扩大接纳其容器的宽度，因此，它将成为宽100％，除非另行告知。你需要给#mixtext一个WIDTH来给你的按钮一些空间。

因为你有#mixtext float:left，文字的容器将始终在屏幕的左边，不居中。

要居中的DIV，因为是float:center，我们需要使用到的利润中心，它没有这样的事。这里使用了“negative margin centering trick”

下面是我们结束：http://jsfiddle.net/Diodeus/74m9C/1/

#mixtext { 
text-align: center; 
padding: 8px; 
font-family: MetaBold, "Trebuchet MS", sans-serif; 
width:600px; 
position:relative;  
float:left;  
left:50%; 
margin-left:-300px; 
border:1px solid #ff0000;  
} 

Answer 3

试试这个：

<style> 
#mixwrap { 
left: 0; 
bottom: 0; 
position: fixed; 
width: 100%; 
background: #555; 
color: white; 
} 

#mixtext { 
width:200px; 
margin:0 auto; 
padding: 8px; 
font-family: MetaBold, "Trebuchet MS", sans-serif; 
} 

#mixclose { 
width:30px; 
cursor: pointer; 
float: right; 
} 

</style> 
<div id="mixwrap"> 
<div id="mixtext"> 
[Text that needs to be centered within the space from left to the next element] 
</div> 
<div id="mixclose"><input type="button" id="mixclosebut" onclick="document.getElementById('mixwrap').style.display = 'none';"> 
</div> 
</div> 

至于删除元素，并保持它去掉，你需要的代码，将检查回发，然后检查元素以查看其是否存在。