时间戳

首页 > 解决方案 > div 不能与屏幕宽度相同，另一个 div 不允许

html - div 不能与屏幕宽度相同，另一个 div 不允许

问题描述

我想让红色div与屏幕的宽度相同。但它与另一个对齐div，它不能是全宽。

红色区域div在绿色之前可用div，但我希望它是全宽的。

另外，我希望红色div垂直和水平居中。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-12 mt-2" style="border-radius: 12px; height: 250px; background-color: #5b6269">


  <div class="position-fixed-top border bg-info float-right"
  style="
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    font-size: 30px;
    background-color: green;
    ">
      ئـۆفـه‌ری رۆژانــه‌
  </div>


  <div class="h-100 row align-items-center justify-content-center">
    <div class="col-12" style="background:red">
      Content content content content
    </div>
  </div>
</div>

标签： htmlcsstwitter-bootstrap

解决方案

您在标题上使用了 float-right 类，这使得下面的 div 不会浮动到整个宽度，添加一个带有 class="clearfix" 的空 div 将解决您的问题。

这是解决问题的笔。 https://codepen.io/mohammad-aslam/pen/axBxPP

<div class="col-12 mt-2" style="border-radius: 12px; height: 250px; background-color: #5b6269">


        <div class="position-fixed-top border bg-info float-right" style=" border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; font-size: 30px;background-color: green;">ئـۆفـه‌ری رۆژانــه‌
        </div>

<div class="clearfix"></div>
        <div class="h-100 row align-items-center justify-content-center">
            <div class="col-12" style="background:red">
                Content content content content
            </div>
        </div>
        </div>

希望能帮助到你。

推荐阅读