将div右边的图像向左对齐

我遇到问题，图像浮动到右边，其余的文本和div浮动到右边。将div右边的图像向左对齐

我可以让它与固定宽度的图像一起工作，但如果我将图像换成稍微不同的尺寸，它将无法正常工作，因为我使用的是固定尺寸。当我不知道图像的大小时，有没有办法让它工作？或者我需要为此使用JS？

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

来源

2014-07-11 Rlweb

哪'div'你要浮到吧？ – Ani

您可以尝试使用任何CSS或内联样式属性：

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

，如果你不想在同一行作为图像的话，你可以添加'clear：right'属性也是如此。

来源

2014-07-11 21:27:01

也许我没有让我自己清楚，但我也希望进度条div在图像的右侧与文本 – Rlweb

您可以添加到float: leftimage

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

.rightContent{ 
    margin-left: 380px; 
}

入住这Demo

来源

2014-07-11 21:29:20 amol

同上我也想要进度条在图片的右侧 – Rlweb

所有内容都在图像的右侧，你有没有检查演示？检查这个新的演示http://jsfiddle.net/amoljawale/agcH5/4/ – amol

简单地利用自举的网格类的正确。我编辑的代码在你的分度类面板体

<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/

来源

2014-07-11 21:30:06

就像我上面说的，谢谢你的回答，但我也希望进度条在图像 – Rlweb

更新的答案和右侧演示:) –

将div右边的图像向左对齐

回答

相关问题