Question

我现在已经尝试了一段时间让三个div彼此相邻。但是那个应该在右边的那个并不位于其他的旁边。它有点跳下来。如下图所示。

以下是代码：

body div:first-of-type {
   /* style */
}

Answer 1

我建议使用display:flex;并使用flex-direction: row | row-reverse | column | column-reverse;

指定所需的弹性方向

此外，您应该将这些CSS属性附加到包含所有三个div的<div></div>。

您可以在此处找到有关此内容的所有信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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">
  <h2>Basic List Group</h2>
  <ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>

</body>
</html>

Answer 3

              <style>  *{
                    -webkit-box-sizing:border-box;
                    -moz-box-sizing:border-box;
                    box-sizing:border-box;
                }
                .span3{
                 width:33.33%;
                 float:left
                 height:250px;
                 display:block;
                 clear:both}
         </style>

    <div class="wrapper">
              <div class="span3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</div>
              <div class="span3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</div>
              <div class="span3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</div>
            </div>

Answer 4

在父元素

上使用display: grid

HTML：

<div class="wrapper">
 <div>
  <p>Lorem ipsum dolor sit amet</p>
 </div>
 <div>
  <p>Lorem ipsum dolor sit amet</p>
 </div>
 <div>
  <p>Lorem ipsum dolor sit amet</p>
 </div>
</div>

CSS：

.wrapper {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr; //defines how many columns (fr means fraction, so in this case .wrapper is divided in three equal fractions)
 grid-column-gap: 10px //space between elements
}

更多信息：CSS Grid

Answer 5

使用bootstrap网格系统

<div class="row">
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

在你的css中添加以下来源：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 6

您可以使用display:inline-block代替float:left

进行简单解决

#left {
    display: inline-block;
    width: 30%;
    height: auto;
}
#middle {
    display: inline-block;
    width: 30%;

    height: auto;
}
#right {
    display: inline-block;
    width: 30%;

    float: right;
    height: auto;
}

我建议使用display:inline-block。

如果您可以使用display:inline-block，则可以编写干净的代码

Answer 7

使用Bootstrap 网格系统（latest version bootstrap@4.0.0-beta）

Bootstrap的grid system使用一系列容器，行和列来布局和对齐内容。它是使用flexbox构建的，并且是fully responsive。下面是一个示例，深入了解网格如何组合在一起。

了解https://getbootstrap.com/docs/4.0/layout/grid/ 或使用

Bootstrap Flex

使用全套版本快速管理layout，lignment，sizing，grid columns，navigation等components，flexbox和CSS响应式sendNotification实用程序。对于更复杂的实现，可能需要自定义static。

了解https://getbootstrap.com/docs/4.0/utilities/flex/

三个div彼此相邻

7 个答案: