浮動屬性在CSS？

-1

HTML：

<div id="block-custom-bottom-contact-us" class="block block--custom block--custom-  bottom-contact-us"> 
    <h2 class="block__title"><none></none></h2> 
    <div class="block__content"> 
    <p><strong>We are <span class="txt_focus">Starter</span> - and this is a cool place for your quote</strong></p> 
    <p>If you have any questions or need a custom plan that will suit your needs please contact us via our contant form</p> 
    <p><a class="button" href="/contact-us">Contact us</a></p> 
    </div> 
</div>

CSS

block-custom-bottom-contact-us { 
    margin-top: 314px; 
    border-top: 1px solid #E8EBED; 
    /*height: 145px;*/ 
} 
#block-custom-bottom-contact-us .block__content { height: 145px } 
#block-custom-bottom-contact-us p { 
    margin: 0; 
    padding: 0; 
    width: 665px; 
    padding-left: 115px; 
    font-size: 12px; 
    color: #acb1b5; 
    float: left; 
} 
#block-custom-bottom-contact-us p:first-child { 
    width: 665px; 
    float: left; 
    position: relative; 
    margin-top: 41px; 
    margin-bottom: 15px; 
} 
#block-custom-bottom-contact-us p:last-child { 
    height: 145px; 
    width: 275px; 
    float: right; 
    margin: 0; 
    padding: 0; 
} 
#block-custom-bottom-contact-us strong { 
    clear: both; 
    font-size: 18px; 
    color: #444444; 
} 
#block-custom-bottom-contact-us .txt_focus { color: #23abf1 }

如何成爲實現這樣嗎？

enter image description here

請幫幫我，謝謝！

來源

2014-04-04 user2935043

究竟什麼是你問？你想複製你的陰影效果嗎？ – SaturnsEye

使用css聯繫我們按鈕在右邊。 p/s：我的英文不好，希望你明白 – user2935043

http://jsfiddle.net/9yuEH/10/看這個小提琴 – Kumar

你的CSS應該是

block-custom-bottom-contact-us { 
    margin-top:314px; 
    border-top: 1px solid #E8EBED; 
    /*height: 145px;*/ 
} 
#block-custom-bottom-contact-us .block__content{ 
    height:145px; 
} 
#block-custom-bottom-contact-us p{ 
    margin:0; 
    padding:0; 
    width:665px; 
    padding-left: 115px; 
    font-size: 12px; 
    color: #acb1b5; 
    float:left; 

} 
#block-custom-bottom-contact-us p:first-child{ 
    width:705px; 
    float:left; 
    position: relative; 
    margin-top:41px; 
    margin-bottom: 15px; 


} 
#block-custom-bottom-contact-us p:last-child{ 
    height:145px; 
    width:705px; 
    float:right; 
    margin:0; 
    padding:0; 
} 
#block-custom-bottom-contact-us strong{ 
    clear:both; 
    font-size: 18px; 
    color: #444444; 
} 
#block-custom-bottom-contact-us .txt_focus{ 
    color: #23abf1; 
} 

.button 
{ 
background:#22A8F1; 
    padding:10px; 
    color:white; 
    margin-left: -90px; 
margin-top: 40px; 

}

和你的HTML

<div id="block-custom-bottom-contact-us" class="block block--custom block--custom-     bottom-contact-us"> 
     <h2 class="block__title"><none></none></h2> 
     <div class="block__content"> 
      <table><tr><td> 
       <p><strong>We are <span class="txt_focus">Starter</span> - and this is a cool place for your quote</strong></p><p>If you have any questions or need a custom plan that will suit your needs please contact us via our contant form</p> 

       </td><td> <p><a class="button" href="/contact-us">Contact us</a></p> </td></tr></table> 
    </div> 
    </div>

看一看演示Demo

來源

2014-04-04 10:06:19

不！僅由CSS設計。 – user2935043

什麼？沒有得到？ –

使用CSS來設計上面圖片中的html代碼 – user2935043

我做了你的HTML代碼進行一些修改（OFC CSS太）

html

<div class="entry"> 
    <div class="left"> 
     <h3>We are <span>Starter</span> - and this is a cool place for your quote</h3> 
     <p>If you have any questions or need a custom plan that will suit your needs please contact us via our contant form</p> 
    </div> 
    <div class="right"> 
     <a href="" class="btn">Contact us</a> 
    </div> 
</div>

CSS

.entry { 
    width: 100%; 
    font-family: Verdana, sans-serif; 
} 

.entry .left, .entry .right { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    vertical-align: middle; 
} 

.entry .left { 
    width:70%; 
} 

.entry .right { 
    width:28%; 
} 

.entry .right .btn { 
    background: #00ACEC; 
    color: #ffffff; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    padding: 0.5em 1em 0.5em 1em; 
    text-decoration: none; 
    float: right; 
    clear: both; 
} 

.entry .left h3 span { 
    color: #00ACEC; 
} 

.entry .left p { 
    color: #A5AAAE; 
    font-style: italic; 
    font-size:0.9em; 
    font-family: serif !important; 
}

demo

來源

2014-04-04 10:10:39 abdulklarapl

浮動屬性在CSS？

回答

相關問題