在CSS中浮动属性？

Question

我有这样的代码：

Jsfiddle

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 }

如何实现这样的目标？

请帮助我，谢谢！

Answer 1

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

Answer 2

我已经对你的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