在右側顯示圖像

Question

我們的頁面看起來像這個鏈接

我們要顯示如下圖所示：

1）減少的文字的背景色長度see cases

2）在右側顯示圖像

我可以嘗試更改position : relative; top: left: some px; position : relative; top: left: some px; 為了一切。 但是我覺得它的編碼不好。 所以請幫幫我

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

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

Answer 1

您可以將此css屬性添加到代碼中

.custom_case_right img{
  float: right;
  }

Answer 2

嘗試這個：

.custom_case_right {
    float: right;
    top: -200px;
    position: relative;
    right: -90px;
}

並添加到.custom_case：

height:550px;

Answer 3

您可以嘗試以下一種方法：

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

更新的演示