모달의 레이아웃

이미지와 텍스트가 엄격하게 경계선이있는 모달을 설치하려고합니다. 테두리가있는 왼쪽에 이미지와 텍스트가있는 인라인 단추도 있어야합니다. 그것도 주위에. 거기에서 이미지/텍스트/버튼의 왼쪽에 링크를 넣어서 대칭이되도록 노력하고 있습니다. 테두리를 이미지 주위에만 머무르게하고 텍스트 아래에 단어 줄 바꿈을 사용하는 데 문제가 있습니다.모달의 레이아웃

이

HTML :

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

이

CSS : 이것은 내가 만들어 봤는데 무엇 현재

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

http://jsfiddle.net/wan4q/11/

출처

2014-04-17 user3547125

나는 당신이 할 수있는 생각

이미지에 대해서만 클래스를 만들고 이미지에 테두리를 지정하십시오.
자바 스크립트를 사용하면 컨테이너 너비를 이미지의 너비와 같게 설정할 수 있습니다.
텍스트를 가지고 이미지가 동일한 div이므로 부모 div 크기에 따라 텍스트가 줄 바꿈됩니다.

JSFiddle

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

JS :

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

CSS :

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

출처

2014-04-19 05:39:35

모달의 레이아웃

답변

관련 문제