防止"float:right"div占满整个space

Question

我在做一个 reddit 克隆时偶然发现了一个问题。

仅供参考：使用 bootstrap v5.0

问题是我想要侧边栏在右边，内容在左边，但是这里一切正常，但是内容部分占据了侧边栏的 space 左边并推动了侧边栏下来。

这是代码

<div>

    <div class="container" style="margin-top: 80px;">
        <div class="posts jumbotron">
            <div class="post">
                <h3 class="post-heading"><a href="#">Lorem</a></h3>
                <p class="post-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus maxime odio soluta eveniet, illum rem corporis minima velit quam voluptatibus earum quae quibusdam aut molestias? Consequuntur quibusdam odio culpa delectus!</p>
                <hr style="height: 3px; margin-top: 30px;">
                <br><br>
            </div>
            <div class="post">
                <h3 class="post-heading"><a href="#">Lorem</a></h3>
                <p class="post-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus maxime odio soluta eveniet, illum rem corporis minima velit quam voluptatibus earum quae quibusdam aut molestias? Consequuntur quibusdam odio culpa delectus!</p>
                <hr style="height: 3px; margin-top: 30px;">
                <br><br>
            </div>
        </div>
    </div>


    <!-- Sidebar -->
    <div class="sidebar jumbotron">
        <h3 class="brand">Joined subfredits</h3>

        <br><br>

        <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a><p>
        <hr>
        <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a><p>
        <hr>
        <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a><p>
        <hr>

    </div>

</div>

和 CSS:

.sidebar {
    float: right;
    padding: 50px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    border-radius: 10px;
    margin-right: 150px;
    width: 20%;
}

.posts {
    border: 1px solid gray;
    width: 75%;
    padding: 50px;
}

Answer 1

向左添加一个浮动：

.posts {
    border: 1px solid gray;
    width: 75%;
    padding: 50px;
    float:left;
}

Answer 2

使用 Bootstrap 实现此目的的正确方法包括以下方法：

使用具有适当结构的 BS grid .container>.row>.col:

/* the selectors have higher sepecifity to override BS rules */

.sidebar.jumbotron {
  /* float: right; */
  padding: 50px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 10px;
  /* margin-right: 150px; */
  /* width: 20%; */
}

.posts.jumbotron {
  border: 1px solid gray;
  /* width: 75%;*/
  padding: 50px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="container" style="margin-top: 80px;">
  <div class="row">
    <div class="posts jumbotron col-8">
      <div class="post">
        <h3 class="post-heading"><a href="#">Lorem</a></h3>
        <p class="post-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus maxime odio soluta eveniet, illum rem corporis minima velit quam voluptatibus earum quae quibusdam aut molestias? Consequuntur quibusdam odio culpa delectus!</p>
        <hr style="height: 3px; margin-top: 30px;">
        <br><br>
      </div>
      <div class="post">
        <h3 class="post-heading"><a href="#">Lorem</a></h3>
        <p class="post-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus maxime odio soluta eveniet, illum rem corporis minima velit quam voluptatibus earum quae quibusdam aut molestias? Consequuntur quibusdam odio culpa delectus!</p>
        <hr style="height: 3px; margin-top: 30px;">
        <br><br>
      </div>
    </div>
    <!-- Sidebar -->
    <div class="sidebar jumbotron col-4">
      <h3 class="brand">Joined subfredits</h3>

      <br><br>

      <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a>
      </p>
      <hr>
      <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a>
      </p>
      <hr>
      <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a>
      </p>
      <hr>

    </div>
  </div>
</div>




<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

使用 BS flex utility classes .d-flex & .flex-row

.sidebar.jumbotron {
  /* float: right; */
  padding: 50px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 10px;
  /* margin-right: 150px; */
  /* width: 20%; */
}

.posts.jumbotron {
  border: 1px solid gray;
  /* width: 75%;*/
  padding: 50px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="container" style="margin-top: 80px;">

  <!-- This -->
  <div class="d-flex flex-row">

    <div class="posts jumbotron">
      <div class="post">
        <h3 class="post-heading"><a href="#">Lorem</a></h3>
        <p class="post-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus maxime odio soluta eveniet, illum rem corporis minima velit quam voluptatibus earum quae quibusdam aut molestias? Consequuntur quibusdam odio culpa delectus!</p>
        <hr style="height: 3px; margin-top: 30px;">
        <br><br>
      </div>
      <div class="post">
        <h3 class="post-heading"><a href="#">Lorem</a></h3>
        <p class="post-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus maxime odio soluta eveniet, illum rem corporis minima velit quam voluptatibus earum quae quibusdam aut molestias? Consequuntur quibusdam odio culpa delectus!</p>
        <hr style="height: 3px; margin-top: 30px;">
        <br><br>
      </div>
    </div>
    <!-- Sidebar -->
    <div class="sidebar jumbotron">
      <h3 class="brand">Joined subfredits</h3>

      <br><br>

      <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a>
      </p>
      <hr>
      <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a>
      </p>
      <hr>
      <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a>
      </p>
      <hr>

    </div>
  </div>
</div>




<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

防止"float:right"div占满整个space

Prevent "float:right" div from occupying the entire space

html

css

alignment

css-float

bootstrap-5