Question

我有3个div，我希望第二个div就像聊天应用程序一样在右边。如何使用标准CSS或bootstrap实现这一目标。我尝试过右拉，但它只是将第3个div和第2个div移到右上方而弄乱了布局。

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

Answer 1

通过使用bootstrap你可以实现这一点

＆＃13;

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

＆＃13;

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

＆＃13;

将孩子与父级div的右侧对齐，就像聊天应用程序一样

1 个答案: