Блог

Я пытаюсь выровнять кнопку и некоторый текст внизу div, очень похожий на приведенный ниже пример, с ценой и кнопкой «Проверить». Каков наилучший способ сделать это. Я создал div, оформил его так, чтобы текст и картинка были правильными. Мне просто нужно прикрепить кнопку с правой стороны, а цену — с левой, параллельно друг другу.

Аналогично отображению продукта на веб-сайте thisiswhyimbroke.com

http://www.thisiswhyimbroke.com/

^^ Цена и кнопка «Проверить». Как мне этого добиться?

Попробуйте вот так: ДЕМО

Попробуйте сначала использовать сброс вашего CSS.

CSS:

 *{
    padding:0;
    margin:0;
}
#priceAndButton {
    width:100%;
    display:block;
    height:30px;
    line-height:30px;
}
#priceAndButton h4 {
    float:left;
    vertical-align:middle;
}
#priceAndButton img {
    float:right;
}
  

Надеюсь, это поможет вам

Я создал рабочую скрипку с вашими требованиями:

http://jsfiddle.net/8993H/

HTML:

 <div id="main-container">
    <div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
    <div class="rhs">
        <div class="button-nav">
            <span class="price">$35.00</span>
            <span class="check-btn"><button>Check It Out</button></span>
        </div>
    </div>
</div>
  

CSS:

 #main-container{
    width:100%;
    border: 1px solid #aaa;
}

.img-div{
    width:50%

}

.img-div img{
    width:100%;
}

.rhs{
    width:48%;
    float:right;
    position:relative;
}

.button-nav{
    position:absolute;
    bottom:10px;
    width:100%;
}

.price{
    float:left;
}

.check-btn{
    float:right;
}
  

Попробуйте это:

 button{
   float:right 
}
#price{
   float:left
}
  

Здесь я создал одну рабочую скрипку для вашего требования.. Вы можете повторно использовать этот CSS. Надеюсь, это вам поможет.

 HTML
    <div class="desc">
    <img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
<a href="#">Check it out</a>
</div>
<div class="price">$500.00</div>
 </div>
  

CSS

  .desc{
    text-align:jstify;
    width:50%;
}
.button a{
    background-color: #faab37;
    color: white;
    display: block;
    float: right;
    padding: 7px 8px;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
  

Надеюсь, это то, что вы ожидаете получить