Question

我正在创造模态。我想在左边对齐我的图像，在右边对齐图像。但是当描述超过某些词时，它就会出现在第二行。如何在右侧对齐整个文本。 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>

Answer 1

text-align: right用于文字对齐

.alignleft {
	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>
	</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>

Answer 2

使用- (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; NSLog(@"%@",NSStringFromCGRect(self.mainTimerView.frame)); }

＆＃13;

display:flex

＆＃13;

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

＆＃13;

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

Answer 3

尝试段落的width: 50%;（或calc(100% -图片宽度);）

＆＃13;

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

＆＃13;

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

＆＃13;

左右对齐

3 个答案: