如何在css中有两个标题？

CSS：

.containers { 
width:100%; 
height:auto; 
padding:10px; 
margin-bottom:0px; 
} 

#id4 { 
float:right; 
margin-right:0; 
display:inline; 
    border:5px solid red; 
} 

#id5 { 
text-align:center; 
    border:5px solid red; 
}

HTML：

<div class='containers'> 
<div id='id4'> 
margin-right:10px; 
</div> 
<div id='id5'> 
    center-text; 
</div>

在这拨弄我想中心的文字是页面的中心，不在左边界和浮动元素之间的中心。

来源

2013-08-30 Lonely

'display：inline-block;'.. ??? –

有两个元素在同一行 – Lonely

ya，几乎是正确的，但是当调整窗口大小时，两个元素都是重叠的，并且总是有水平滚动条。 – Lonely

的下面是通过将position: absolute; right: 10px;到id4 DIV一个可能的选项。这将使div始终保持在距右边10px处。但必须指出的是，该元素不再是一个浮动元素。

注意：如果结果窗口收缩超过某个级别，则文本会重叠。如果当我设法找到解决办法，我会更新答案。

.containers { 
    width: 100%; 
    height: auto; 
    padding: 10px; 
    margin-bottom: 0px; 
    text-align: center; 
    box-sizing: border-box; 
} 
#id4 { 
    display: inline-block; 
    position: absolute; 
    right: 10px; 
    border: 5px solid red; 
} 
#id5 { 
    display: inline-block; 
    border: 5px solid red; 
}

来源

2013-08-30 06:27:57 Harry

感谢您的时间 – Lonely

@Lonely：总是很高兴帮助队友Btw，我添加了box-sizing属性来解决滚动条的问题。 ]（http://www.paulirish.com/2012/box-sizing-border-box-ftw/）有关于它的更多详细信息 – Harry

只想询问一下，好吧我会检查链接 – Lonely

.containers { 
    width:100%; 
    height:auto; 
    padding:10px; 
    margin-bottom:0px; 
    text-align:center; 
} 

#id4 { 
    float:right; 
    margin-right:0; 
    display:inline; 
    border:5px solid red; 
} 
#id5 { 
    margin: 0 auto; 
    display:inline-block; 
    border:5px solid red; 
}

DEMO

来源

2013-08-30 05:44:02

尝试调整结果窗口的大小，中心文本不在页面的中心 – Lonely

@Lonely它正在为我工作，你可以在你的实际代码中尝试它并在浏览器中尝试它吗？ –

不，它不适用于我也在我的浏览器中尝试过它 – Lonely

如何在css中有两个标题？

回答

相关问题