1

这是我现在所拥有的：

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%;
}

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

这是我想要的样子：

4

5 回答 5

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;
}
于 2013-09-04T20:31:47.180 回答
1

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>
于 2013-09-04T20:31:56.957 回答
1

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

HTML（使用类而不是 ids）

<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类中添加一些内容。

于 2013-09-04T20:34:09.483 回答
1

这是一个稍微修改的示例：

<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/

于 2013-09-04T20:38:50.530 回答
1

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;
}
于 2013-09-04T20:40:54.017 回答