2

我有一个使用 bootstrap 4div设置的显示。然后我在其中添加另一个并设置为并使用. 像这样：flexdivpositionabsoluterotatetransform

<div class="container">
  <div class="area d-flex position-relative">
    <div class="title">
      title
    </div>
    <div>
      content
    </div>
  </div>
</div>

CSS：

.inner {
  background: #f1f1f1;
}

.title {
  transform: rotate(-90deg) !important;
  position: absolute;
  left: -20px;
  top: 43px;
  text-align: center;
  font-size: 12px;
  background-color: #000;
  width: auto;
}

我设置width为使用位置自动auto调整大小width。但实际上它不起作用。我该如何解决这个问题？divabsolute

我需要这样做：

在此处输入图像描述

编辑演示：

在这里演示

4

2 回答 2

1

我认为它可以用它来完成，border-left而不是d-flex当我们比较两者并且两者都给出相同的输出时会变得更复杂

我的方法是给<div>content</div>aborder-left创建一个黑色垂直矩形和rotate一个<div>title</div>with270deg并使其居中使用top:50%; transform: translateY(-50%);，但它的位置应该是absolute

.wrapper{
  padding-left: 1rem;
  border-left: 40px solid black;
  position: absolute;
}

.title{
  position: absolute;
  color: white;
  letter-spacing: 2px;
  font-size: 12px;
  left: -5%;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
}
<div class="container">
  <div class="wrapper">
      <div class='title'>title</div>
    <div>
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
    </div>
  </div>
</div>

更新：响应式设计代码

由于.content应该将高度值分配为宽度.title，因此需要一点 JavaScript 并将其添加到下面的代码片段中。（据我所知，通过纯 CSS 是不可能的）。

let eleHeight = document.getElementById('content').offsetHeight;
let titleEle = document.getElementById('title');
titleEle.style.minWidth = eleHeight+"px";
.wrapper{
    padding: 4rem;
}

.inner{
    display: flex;
   position: relative;
}

.side-text{
    color: white;
    position: absolute;
    transform: rotate(90deg);
    transform-origin: top left;
}

.title{
    text-align: center;
    background-color: black;
  margin: auto; 
}

.content{
    padding-left: 1rem;
}
<div class='wrapper'>
    <div class='inner'>
          <div class='side-text'>
              <div id='title' class='title'>title title title</div>
          </div>
          <div id='content' class='content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
    </div>
</div>

于 2021-04-30T09:54:23.277 回答
0

您不需要使用转换。使用flex-rowwithd-flex来实现它。

.inner {
  background: #f1f1f1;
}

.title {
  background-color: #000;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="inner d-flex flex-row">
    <div class="title">
      title
    </div>
    <div>
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    </div>
  </div>
</div>

参考

引导 - 弹性

于 2021-04-30T08:18:48.323 回答