框内的CSS对齐

Question

我正在尝试将div下方的按钮和一些文本对齐，就像下面的示例中的Price和Check it out按钮一样。什么是最好的方法。我做了一个div，用它来设置文本，然后将图片设置为正确。我只需将按钮连接到右侧，价格左侧，相互内联。

类似于网站thisiswhyimbroke.com中的产品显示

http://www.thisiswhyimbroke.com/

^^ Price和Check It Out按钮。我如何实现这一目标？

Answer 1

试试这个：

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

Answer 2

我创造了一个符合您要求的工作小提琴：

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

Answer 3

在这里，我根据您的要求创建了一个fiddle。您可以重新使用此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;
}

希望这是您的预期输出

Answer 4

请尝试以下操作： DEMO

尝试先使用重置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;
}

希望这有助于你