将这些元素放置在 div 中的最佳方法是什么？

Question

我目前正在尝试创建一个看起来像这样的结构：

如您所见，这涉及一个相对于页面主体居中的主 div (div 1)。然后它包括第二个 div (div 2)，它与 ​​div 1 的左侧对齐，该 div 用黑色填充并包含垂直文本。

为此，我尝试使用以下 HTML 以及如下所示的 css 代码：

.div1 {
  margin-left: 10%;
  margin-right: 10%;
}
.div2 {
  align: left;
  width: 25px;
  background-color: black;
}
.sidetext {
  color: white;
  transform: rotate(270deg);
  transform-origin: left bottom 0;
}

<div class="div1">
  <div class="div2">
    <h3 class="sidetext">Post #NUM</h3>
  </div>
  <p>The main content (text) for this div is written here</p>
</div>   

谁能明白为什么这可能没有给出预期的结果？

Answer 1

试试这个： 添加浮动：左；到您的侧边栏。

.div1 {
  margin-left: 10%;
  margin-right: 10%;
}
.div2 {
  width: 50px;
  float: left;
  background-color: black;
  margin-right: 10px
}
.sidetext {
  color: white;
  float: left;
  transform: rotate(270deg);
  transform-origin: 22px center 0;
}

<div class="div1">
  <div class="div2">
    <h3 class="sidetext">Post #NUM</h3>
  </div>
  <p>The main content (text) for this div is written here</p>
</div>

您可以在这里查看：https://jsfiddle.net/xmmjrspn/

Answer 2

align: left 语法错误，改成float: left 就可以了。

第二种方式：

.div1 {
  position: relative;
  ...
}
.div2 {
  position: absolute;
  left: 0;
  ...
}

Answer 3

我认为您需要在 div2 上 float: left 并在 div1 上拥有 overflow: auto。 overflow: auto 将确保您的 div1 围绕 div2。还有position: relative 在带有左值的sidetext 上，以确保您可以看到垂直文本。 https://jsfiddle.net/sx6e0971/2/

.div1 {
  margin-left: 10%;
  margin-right: 10%;
  overflow: auto;
}
.div2 {
  float: left;
  width: 25px;
  background-color: black;
}
.sidetext {
  position: relative;
  left: 45px;
  color: white;
  transform: rotate(270deg);
  transform-origin: left bottom 0;
}

Answer 4

我会选择 flex 和 writing-mode，列高会自行调整。

https://www.w3.org/TR/css3-writing-modes/

.div1 {
  border: solid;
  margin: 1em 10%;
  display: flex;
}
.div2 {
  text-align:center;
  width: 3.25em;
  padding: 1em;
  white-space: nowrap;
  background: gray;
  -webkit-writing-mode: vertical-lr;
  /* old Win safari */
  writing-mode: vertical-rl;
  writing-mode: tb-lr;
  writing-mode:sideways-lr;/* should be the one */  
  /* eventually IF SIDEWAYS NOT ENOUGH IMPLEMENTED 
  transform: scale(-1, -1); */
}
p {
  border-left: solid;
  margin: 0;
  padding:0.5em;
  flex: 1;
}
/* eventually center text in p */

p {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="div1">
  <div class="div2">
    <h3 class="sidetext">Post #NUM</h3>
  </div>
  <p>The main content (text) for this div is written here</p>
</div>
<div class="div1">
  <div class="div2">
    <h3 class="sidetext">Post #NUM</h3>
  </div>
  <p>The main content (text) for this div is written here
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line</p>
</div>

DEMO

Answer 5

您需要浮动来让sidetext 和p 并排放置。此外，如果您将旋转应用于 div2 而不是其中的文本，并删除 transform-origin css 它将起作用：

.div1{
  width:90%;
  margin-left: 10%;
  margin-right: 10%;
}

.div2{
  transform: rotate(270deg);
  background-color: black;
  float: left;
}

.sidetext{
  color: white;
  float: left;
}

p {
  float: left;
}

Answer 6

您实际上已经接近解决方案，这就是您错过的地方：

• align:left; 应该是 float:left;
• transform-origin: left bottom 0; 将标题从黑色 div 中旋转出来，最好只围绕中心旋转，translate 将其旋转到正确的位置
• 添加white-space: nowrap以确保标题在一行
• 将您的内容包装在一个 div 中，以防您的段落不止一个。

.div1 {
  margin-left: 10%;
  margin-right: 10%;
}
.div2 {
  float: left;
  width: 25px;
  background-color: black;
  min-height: 15em;
}
.sidetext {
  white-space: nowrap;
  color: white;
  transform: rotate(-90deg) translateX(-10em);
}

<div class="div1">
  <div class="div2">
    <h3 class="sidetext">Post #NUM</h3>
  </div>
  <div class="content">
    <p>The main content (text) for this div is written here</p>
  </div>
</div>

还有什么要做： 在此示例中，.div2 和 .content 的高度不同。此外，您还必须根据需要调整 min-height 和 translateX 的数字。

Answer 7

试试这个

    .div1 {
      border: 1px solid #000;
      width: 100%;
      height: 400px;
      text-align: center;
      padding: 25px 0;
    }
    .div2 {
      background-color: black;
      display: inline-block;
      color: white;
    }
    p {
      display: inline-block;
    }

    <div class="div1">
        <div class="div2">
            <h3 class="sidetext">Post #NUM</h3>
        </div>
        <p>The main content (text) for this div is written here</p>
    </div>

这里是检查https://jsfiddle.net/ont9sxzx/1/的jsfieddle链接

Answer 8

尝试使用 flexbox 将侧边栏与左侧对齐，然后将书写模式的文本旋转 180 度。

  .vertical {
    writing-mode: vertical-rl;
    white-space: nowrap;
    transform: rotate(180deg);
  }

如果您希望侧边栏高度取决于内容高度，也可以使用text-overflow: ellipsis

codepen