Как создать многоцветный баннер с текстом с помощью CSS?

Вот что я прямо сейчас:Как создать многоцветный баннер с текстом с помощью CSS?

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

Обе стороны разделены правильно, но левый фон покрывает только половину баннера по вертикали.

Вот что я хочу, чтобы это выглядело как:

источник

2013-09-04 Henry

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-04 20:31:56

Отлично, спасибо! Мне просто нужно было добавить float: осталось до блока div. – Henry

@ Хенри, я бы предложил против плавания слишком часто. Он имеет свои преимущества в определенных ситуациях, но не полагается на него каким-либо образом, он может стать беспорядочным! –

Есть ли способ сделать эту работу без поплавка? Когда я использовал ваш код, там был разрыв строки между ними. Кроме того, не могли бы вы объяснить, почему плавание плохое? Я знаю, что это имеет какое-то отношение к испортить поток элементов, но я относительно новичок в HTML/CSS. – Henry

Попробуйте так:

<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-04 20:31:47 putvande

Спасибо, но это не выполнить второй backgro и цвет. – Henry

Да, это так: http://jsfiddle.net/H2TCU/. – putvande

Извините, я пропустил этот второй CSS для #right. – Henry

Я предлагаю следующее http://jsfiddle.net/BTmtY/

HTML (использование классов вместо идентификаторов)

<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-04 20:34:09 Krasimir

Вот немного модифицированный пример:

<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-04 20:38:50

Это прекрасно работает. Благодаря! – Henry

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-04 20:40:54 OriShuss

Как создать многоцветный баннер с текстом с помощью CSS?

ответ

Смежные вопросы