防止“float:right” div 占据整个空间答案

【问题标题】：Prevent "float:right" div from occupying the entire space防止“float:right” div 占据整个空间
【发布时间】：2021-11-05 06:23:56
【问题描述】：

我正在使用 reddit 克隆并偶然发现了一个问题。

仅供参考：使用引导 v5.0

问题是我希望侧栏在右侧，内容在左侧，但在这里一切正常，但内容部分占据了侧栏的剩余空间并将侧栏向下推。

这里是代码

<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;
}

【问题讨论】：

不要使用float对，可以使用BS5类或者直接使用flexbox

标签： html css alignment css-float bootstrap-5

【解决方案1】：

向左添加一个浮点数：

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

【讨论】：

@tacoshy 但对我来说一切正常有什么问题？
因为这是一种不好的做法，对于不想犯新手错误并以正确、干净的现代方式编程的程序员来说没有用处。
问题是浮动会从正常流程中删除您的内容。而在 2021 年，这不是正确的方法。我建议您学习 BS5 网格的工作原理（您可以阅读文档）以获得所需的布局
谢谢@Sfili_81

【解决方案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>

【讨论】：