浮动图像留下文本和段落，同时保持一切响应

Question

使用Bootstrap 3.03，我试图让一个响应的img浮动左边有两个标题和两个段落环绕图像的右边，一个总是留在左下角，而一切都保持响应，如下图所示：

HTML：

  <div class="row">
    <div id="amanda" >
      <img  id="amandaimg" text-align="left" class="img-responsive" src=""/>

       <div id="rightb">
        <h1 id="bheading"> Heading 1</h1>
        <h1 id="pheading"> Heading 2</h1>
          <p id="bp">Lorem ipsum dolor sit amet, inermis denique verterem ex vel. Has ne iisque detracto. Ea eum utinam labores. Quot dolorem mea et, omnis eleifend no per. In verear meliore vivendo pro, nec in rebum suscipit lobortis, laudem melius assueverit vix at. Ei ius modo tempor fuisset, sit eu noster vidisse moderatius, cu cibo minim argumentum mea. Vix enim purto appellantur eu, sea illud corpora efficiendi ut. No vix tota ullum legendos, nec veri omnium cu, dicat verear impetus cu vis. Ne quas laoreet his.
          </p>
            <p id="bp">  Lorem ipsum dolor sit amet, inermis denique verterem ex vel. Has ne iisque detracto. Ea eum utinam labores. Quot dolorem mea et, omnis eleifend no per. In verear meliore vivendo pro, nec in rebum suscipit lobortis, laudem melius assueverit vix at. Ei ius modo tempor fuisset, sit eu noster vidisse moderatius, cu cibo minim argumentum mea. Vix enim purto appellantur eu, sea illud corpora efficiendi ut. No vix tota ullum legendos, nec veri omnium cu, dicat verear impetus cu vis. Ne quas laoreet his.
            </p>  
          </div>
           <div id="leftb" class="col-md-8"><p id="op">Lorem ipsum dolor sit amet, inermis denique verterem ex vel. Has ne iisque detracto. Ea eum utinam labores. Quot dolorem mea et, omnis eleifend no per. In verear meliore vivendo pro, nec in rebum suscipit lobortis, laudem melius assueverit vix at. Ei ius modo tempor fuisset, sit eu noster vidisse moderatius, cu cibo minim argumentum mea. Vix enim purto appellantur eu, sea illud corpora efficiendi ut. No vix tota ullum legendos, nec veri omnium cu, dicat verear impetus cu vis. Ne quas laoreet his.

          </p>
            </div>
           </div>
          </div>

CSS：

       #amanda {margin-top:-30px;background-image: url();min-height:600px;max-width:945px;margin-bottom:20px;margin-left: auto; margin-right:auto;  }

      #bheading {color:#fff;font-size:33px;margin-top:20px;padding-left:30px;float:left; margin-bottom:4px;width:500px;}
      #pheading {color:#fff;font-size:22px;float:left;margin-left:30px;margin-bottom:12px;width:300px;}
      #rightb {  text-align:left;}
      #leftb { float:left; clear:both;}
      #bp {text-indent:20px;color:#fff;font-size:16px;max-width:470px; padding-top:8px;padding-left:30px;float:left; text-align:left;}
      #amandaimg {width:350px; height:329px;float:left;margin-top:28px;margin-left:30px;}

上面的代码我遇到了很多麻烦......我做错了什么/我能解决什么？

Answer 1

我想出了一点点摆弄：

http://jsfiddle.net/Lbavvg2h/1/

它的主旨是你希望图像在一个div中，然后除了底部之外的标题和段落在第二个div中。

<div><img></img></div>
<div><h1></h1><h1></h1><p></p></div>

这两个div是

display:inline-block; 
vertical-align:top;  

为了使它们正确并排并排，不需要浮动。然后你有另一个div为底部段落。然后你可以根据自己的喜好调整最小/最大宽度，容器宽度，边距，字体大小以及所有这些。