将孩子对准父母div的右侧，如聊天应用

我有3个div，我想让第二个div像聊天应用一样在右边。我如何用标准的CSS或bootstrap来实现这一点。我尝试了拉右，但它只是通过将第三个div和第二个div移到右上方来弥补布局。通过引导将孩子对准父母div的右侧，如聊天应用

<div>div1</div> 
<div class="pull-right">div2</div> 
<div>div3</div>

来源

2017-08-15 user172902

就可以实现这个

.child{border:2px solid #000; height:200px; margin:5px 0; min-width:100px; }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-md-4 child pull-left"></div> 
 
</div> 
 
<div class="row"> 
 
<div class="col-md-4 child pull-right"></div> 
 
</div> 
 
<div class="row"> 
 
<div class="col-md-4 child pull-left"></div> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

来源

2017-08-15 03:39:55

使用float离开了明确的两个，然后浮动权和明确等。

来源

2017-08-15 04:07:43

将孩子对准父母div的右侧，如聊天应用

回答

相关问题