Html 模态布局

我正在尝试设置一个模式，该模式的左侧有一个图像和文本，周围有一个边框，左侧还有一个按钮，与图像和文本内联，周围也有边框。从这里开始，我尝试将链接放在图像/文本/按钮的左侧，使其对称。我有麻烦，虽然让边框只停留在图像周围，并有文字文字包装下的图像。这就是我目前正在创建的内容：

HTML:

我想你可以

仅为图像创建类并指定其边框。 使用javascript可以将容器宽度设置为与图像宽度相等。 使文本和图像具有相同的div，以便文本根据父div的大小进行换行。

CSS:

<!-- Button trigger modal --> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Modal title</h4>

        </div>
        <div class="modal-body">
            <div class="content" style="word-wrap">
                <img class="img-responsive" src="https://www.gl.ciw.edu/sites/www.gl.ciw.edu/files/users/pwoodard/microbiology.jpg" alt="image" />
                <p float:left;>This is the text. This is the text. This is the text. This is the text. This is the text. This is the text. This is the text. This is the text.</p>
                <button type="button" class="btn btn-primary" data-dismiss="modal" align="center">$4500</button>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

.content {
    padding: 10px 10px 10px 10px;
    position: left;
    border:1px solid gray;
    outline: thin;
}

 <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
            <div class="container">
                <div class="wrap">
                    <img class="img-responsive bordered-image"     src="https://www.gl.ciw.edu/sites/www.gl.ciw.edu/files/users/pwoodard/microbiology.jpg" alt="image"/>
                    <div class="content">
                    <p style="float:left;">
                        This is the text.
                        This is the text.
                        This is the text.
                        This is the text.
                        This is the text.
                        This is the text.
                        This is the text.
                        This is the text.
                    </p>
                <button type="button" class="btn btn-primary" data-dismiss="modal" align="center">$4500</button>
                </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

(function() {
    var img = new Image();
    var $mydiv = $('.wrap');
    img.src = 'https://www.gl.ciw.edu/sites/www.gl.ciw.edu/files/users/pwoodard/microbiology.jpg';
    $mydiv.width(img.width);
})();

.content {
padding: 10px 10px 10px 10px;
    position: left;
    outline: thin;
  }
 .bordered-image{
    border:1px solid gray;
  }
 .wrap {
    display: inline-block;
    position: relative;
  }