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

2 つの側面は正しく分割されていますが、左側の背景は垂直方向にバナーの半分しかカバーしていません。

これが私が望むものです：

4

5 に答える 5

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 (ID の代わりにクラスを使用)

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

CSS (ブロックを2つ作って浮かせる)

#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 に答える