Question

这就是我现在所拥有的：

HTML：

<div id="content">
<p>Text here</p>
<div id="right"><p>Text here</p></div>
</div>

CSS：

#content{
font-size:25px;
color:white;
font-weight:bold;
background-color:red;
}

#right{
background-color:#53EDF0;
margin-left:50%;
}

正确分割双面，但左侧背景仅垂直覆盖横幅的一半。

这就是我想要的样子：

Answer 1

试试这样：

<div id="content">
    <p>Text here</p>
</div>
<div id="right">
    <p>Text here</p>
</div>

CSS：

#content, #right {
    font-size:25px;
    color: #53EDF0;
    font-weight:bold;
    background-color:red;
    float:left;
}

#right{
    color: red;
    background-color:#53EDF0;
}

Answer 2

CSS

div 
{ 
    height: 200px;
    width: 400px;
    font-size: 35px;
    font-weight: bolder;
    text-align: center;
    display: inline-block;
}

.red 
{
    color: blue;
    background-color: red;
}

.blue
{
    color: red;
    background-color: blue;
}

HTML

<html>
<body>
    <div class="red">Text</div><div class="blue">Text</div>
</body>
</html>

Answer 3

我会建议以下http://jsfiddle.net/BTmtY/

HTML（使用类而不是ID）

<div id="content">
    <div class="left"><p>Text here</p></div>
    <div class="right"><p>Text here</p></div>
</div>

CSS（创建两个块并浮动它们）

#content{
    font-size:25px;
    color:white;
    font-weight:bold;
    background-color:red;
}
#content:after {
    display: table;
    clear: both;
    content: "";
}
.right, .left {
    width: 50%;
}
.right p, .left p {
    padding: 0 10px 0 20px;
}
.right{
    background-color:#53EDF0;
    float: right;
}
.left {
    float: left;
}

如果您需要更多样式，例如字体颜色更改，只需在 .left 和 .right 类中添加内容。

Answer 4

这是一个有点修改过的样本：

<div class="content">
    <span>Text here</span>
    <span class="right">Text here</span>
</div>

.content{
    float: left;
    font-size:25px;
    color:white;
    font-weight:bold;
    background-color:red;
    width: 100%;
}
.content span { float: left; width: 50%; text-align: center; }

.right{
    background-color:#53EDF0;
}

JSFiddle：http://jsfiddle.net/vkocjancic/Asdp6/

Answer 5

HTML：

<div id="content"><p>TEXT 1</p></div>
<div id="right"><p>TEXT 2</p></div>

CSS：

#content{
color:#53EDF0;
background-color:red;
width:50%;

}

#right{
background-color:#53EDF0;
margin-left:50%;
color:red;
width:50%;
margin-top:-109px;
} 

p {
    margin-left:20px;
    font-family:Arial, Helvetiva, sans-serif;
    font-weight:bold;
    font-size:50px;
    font-style:italic;
}

如何使用CSS创建带文本的多色横幅？

5 个答案: