將孩子對準父母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的右側，如聊天應用

回答

相關問題