將圖像左對齊，右對齊div

Question

我在使圖像向右浮動而其余文本和div向右浮動時遇到問題。

我可以使它與固定寬度的圖像一起使用，但是如果我將圖像交換為稍有不同的尺寸，它將無法正常工作，因為我使用的是固定尺寸。 當我不知道圖像大小時，有什么方法可以工作嗎？ 還是我需要為此使用JS？

http://jsfiddle.net/agcH5/

<div style="width:900px">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Course Name</h3>
    </div>
    <div class="panel-body">
        <img src="http://i.imgur.com/TyQ45nk.jpg">
        <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed porttitor diam. Quisque fermentum orci sed velit lacinia, nec vehicula eros consequat. Morbi vestibulum convallis auctor.</p>
        <div class="container-fluid row">
            <div class="col-md-9" style="padding: 0">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        80%
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <a href="#" class="btn btn-sm btn-danger">Continue</a>
            </div>
        </div></div>
    </div>
</div>
</div>

Answer 1

只需正確使用boostrap的網格類即可。 我使用類panel-body在您的div中編輯了代碼

   <div class="panel-body">
      <div class="col-md-6">
        <img src='http://i.imgur.com/TyQ45nk.jpg'>
      </div>
      <div class="col-md-6">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed porttitor diam. Quisque fermentum orci sed velit lacinia, nec vehicula eros consequat. Morbi vestibulum convallis auctor.</p>
        <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        80%
                    </div>
                </div>
        <a href="#" class="btn btn-sm btn-danger">Continue</a>
      </div>
    </div>

演示： http : //jsbin.com/gamaj/1/

Answer 2

您可以嘗試使用CSS或內聯樣式屬性：

<img src="http://i.imgur.com/TyQ45nk.jpg" style="float:right">

如果您不希望單詞與圖片位於同一行，則也可以添加'clear：right'屬性。

Answer 3

您可以添加float: left在image

.panel-body img{
    float: left;
    margin: 0 0 10px 0;   
}

.rightContent{
    margin-left: 380px;
}

檢查這個演示