[英]Display image on right side
We have page looking like this link 我们的页面看起来像这个链接
We want to display like below image : 我们要显示如下图所示:
1)reduce the background-color length of text see cases
1)减少的文字的背景色长度see cases
2)Display Image on right side 2)在右侧显示图像
I can try chnaging position : relative; top: left: some px;
我可以尝试更改position : relative; top: left: some px;
position : relative; top: left: some px;
for everything. 为了一切。 but i felt its bad coding. 但是我觉得它的编码不好。 so please help for me. 所以请帮帮我
css CSS
.custom_case
{
background: #fff;
padding: 95px;
}
.cc1
{
color: #ff7704;
font-family: 'Roboto Condensed', sans-serif;
font-size:34px;
}
.cc2
{
color: #000000;
text-transform: capitalize;
font-size:34px;
}
#brand_select
{
color: #000000;
text-transform: capitalize;
font-size:17px;
font-weight:bold;
letter-spacing: 1px;
}
#model_select
{
color: #000000;
text-transform: capitalize;
font-size:17px;
font-weight:bold;
letter-spacing: 1px;
}
.cc3
{
background: #ff7704;
position:relative;
top:20px;
}
.cc5
{
font-size:20px;
color:#FFFFFF;
}
html HTML
<div class="custom_case">
<div class="custom_case_left">
<h1 class="cc1">Custom Cases</h1>
<h2 class="cc2">Make Your Own design</h2>
</div>
<?php
$brandSelect .= '<option value="">My Brand</option>';
echo '<select id="model_select"><option value="">My Model</option></select>';
?>
<div class ="cc3">
<div class ="cc4">
<a href="http://sbdev2.kidsdial.com/golden-waves-marble-texture-apple-iphone-4-phone-case.html"><span class ="cc5"> See Cases </span> </a>
</div>
</div>
<div class="custom_case_right">
<img src="<?php echo $this->getSkinUrl('images/gal.PNG'); ?>" >
</div>
You can add this css property to your code 您可以将此css属性添加到代码中
.custom_case_right img{
float: right;
}
try this: 尝试这个:
.custom_case_right {
float: right;
top: -200px;
position: relative;
right: -90px;
}
and add to .custom_case this: 并添加到.custom_case:
height:550px;
you can try this one: 您可以尝试以下一种方法:
.custom_case
{
background: #fff;
padding: 95px;
}
.custom_case_left h1
{
font-size:20px;
}
.custom_case_left h2
{
font-size:20px;
}
.cc1
{
color: #ff7704;
font-family: 'Roboto Condensed', sans-serif;
font-size:34px;
}
.cc2
{
color: #000000;
text-transform: capitalize;
font-size:34px;
}
.cc4
{
width:200px;
}
#brand_select
{
color: #000000;
text-transform: capitalize;
font-size:17px;
font-weight:bold;
letter-spacing: 1px;
}
#model_select
{
color: #000000;
text-transform: capitalize;
font-size:17px;
font-weight:bold;
letter-spacing: 1px;
}
.cc3
{
background: #ff7704;
position:relative;
top:20px;
width: 148px;
}
.cc5
{
font-size:20px;
color:#FFFFFF;
}
.custom_case_right img {
float: right;
top: -150px;
position: relative;
right: -90px;
width:250px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.