Левое и правое выравнивание

Я создаю модальный. Я хочу выровнять свое изображение слева и описание изображения справа. Но когда описания превышают определенные слова, он выходит на вторую строчку. Как выравнивать весь текст с правой стороны. Here is my code.Левое и правое выравнивание

<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 

     <meta charset="UTF-8"> 
    <title>Bootstrap Modal and popover with Velocity.js animation</title> 
    <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> 
    <meta name="viewport" content="width=device-width"> 
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> 
    <link rel="stylesheet" href="css/style.css"> 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script> 
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js'></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Hello Plunker!</h1> 
     <a href="#myModal15" role="button" class="btn btn-default" data-toggle="modal">bounceRightIn</a> 
     <div id="myModal15" class="modal" data-easein="bounceRightIn" 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">×</button> 
         <img src="ic_launcher-web.png" alt="" class="logo">    
        <h4 class="modal-title">modal header</h4> 
       </div> 
       <div class="modal-body"> 
         <div id="textbox"> 
          <p class="alignleft"> 
           <a href="http://www.apkmonk.com/app/com.app.affiliate.apnapaisa/#previous" > 
           <img src="Android-app-on-google-play.svg" alt="" class="image"> 
           </a> 
          </p> 
          <p class="alignright">big text big text big text big text big text big text big text big text big text big text big text big text big text big text big text </p> 
         </div>    
        </div> 
       <div class="modal-footer"> 
       <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button> 
       <button class="btn btn-primary">Save changes</button> 
       </div> 
     </div> 
     </div> 
     </div> 
    </body> 

</html>

источник

2016-07-14 user5397448

Использование display:flex

#textbox { 
 
    display:flex; 
 
    } 
 
.alignleft { 
 
    padding:10px; 
 
    }

<div id="textbox"> 
 
    <p class="alignleft"> 
 
    <a href="" > 
 
\t <img src="Android-app-on-google-play.svg" alt="logo" class="image"> 
 
\t </a> 
 
\t </p> 
 
    
 
    <p class="alignright"> 
 
This is a very big lines of text.This is a very big lines of text.This is a very big lines of text.This is a very big lines of text. </p> 
 
</div>

Plunker: http://plnkr.co/edit/mTuv4fAmq2MYyBhjDQe6?p=preview

источник

2016-07-14 07:16:51 Rohit

text-align: right для текста выравнивая

.alignleft { 
 
\t float: left; 
 
} 
 
.alignright { 
 
    text-align: right; 
 
}

<div id="textbox"> 
 
    <div style="clear: both;"> 
 
    <p class="alignleft"> 
 
     <a href="" > 
 
     <img src="Android-app-on-google-play.svg" alt="logo" class="image"> 
 
     </a> 
 
\t </p> 
 
    <p class="alignright"> 
 
This is a very big lines of text.This is a very big lines of text.This is a very big lines of text.This is a very big lines of text. 
 
    </p> 
 
    </div> 
 
</div>

источник

2016-07-14 07:15:00

Попробуйте width: 50%; (или calc(100% - ширину изображения );) для пункта

.alignleft { 
 
\t float: left; 
 
} 
 
.alignright { 
 
\t float: right; 
 
     width: 50%; 
 
}

<div id="textbox"> 
 
    <div style="clear: both;"> 
 
    
 
     
 
    <p class="alignleft"> 
 
    <a href="" > 
 
\t <img src="Android-app-on-google-play.svg" alt="logo" class="image"> 
 
\t </a> 
 
\t </p> 
 
    
 
    <p class="alignright"> 
 
This is a very big lines of text.This is a very big lines of text.This is a very big lines of text.This is a very big lines of text. </p> 
 
</div> 
 
</div>

источник

2016-07-14 07:17:39

Когда я использую поплавок: правый, модальный сноска не получает отрегулировать. – user5397448

Левое и правое выравнивание

ответ

Смежные вопросы