Question

我目前正在尝试创建一个类似这样的结构：

struc

正如您所看到的，这涉及一个主div（div 1），它相对于页面主体居中。然后它包括第二个div（div 2），它与div 1的左边对齐，它以黑色填充并包含垂直文本。

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

＆＃13;

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

＆＃13;

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

＆＃13;

任何人都可以理解为什么这可能无法达到预期效果吗？

Answer 1

我会选择弹性和写入模式，列高度会调整自己。

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 2

你实际上接近解决方案，这是你错过的地方：

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 3

试试这个：添加浮动：左;到你的侧边栏。

.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 4

你需要花车才能得到侧文字和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 5

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

这是检查https://jsfiddle.net/ont9sxzx/1/

的jsfieddle链接

Answer 6

align: left语法错误，更改为float: left并且您拥有它。

第二种方式：

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

Answer 7

我认为你需要在div2上float: left并在div1上拥有overflow: auto。 overflow: auto将确保您的div1包围div2。在sidetext上还有position: relative左值，以确保您可以看到垂直文本。 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 8

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

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

如果您希望侧边栏高度取决于内容高度

，也可以使用text-overflow: ellipsis

codepen

在div中定位这些元素的最佳方法是什么？

8 个答案: