Question

我无法弄清楚如何在对齐模式下显示我的垂直文本，以便我的文本占据它所在的h1块中的整个空间。我也不允许在这里使用j。

＆＃13;

<p>
    <a></a>
    Some text
    <a></a>
    Some text
</p>

＆＃13;

section {
    text-align: left;
}

section > header {
    float: left;
    width: 10%;
}

section article {
    float: left;
    width: 42%;
    margin: 0 1%;
}
section article div {
    width: 100%;
    margin: 0 auto;
}

.col_container {
    width: 400px;
    text-align: left;
    margin: 0 0 0 auto;
    border:1px solid black;

}

.vertical_header {
    position: relative;
    float: left;
    width: 200px;
    height: 1.5em;
    margin-bottom:-1em;
    line-height: 1.5em;    
    text-align: justify;
    text-align-last: justify;
    left: 0;
    top: 205px;
    font-weight: lighter;
    -webkit-transform: rotate(-90deg);	
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: left top 0;
}

.vertical_header:after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 100%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.image_container {
    width: 150px;
    height: 225px;
    background-color: #cccccc;
}

.info h2{
    font-size: 1em
}

.info h2, .info h3, .info p {
    text-align: center;
}

.info h3, .info p {
    font-weight: lighter;
    font-size: 0.8em;
}

.info p {
    line-height: 0.4;
}

＆＃13;

基本上我喜欢＆＃34; STAFF＆＃34;单词就像灰色块高一样，我已经看到了使用这个css的黑客：

<div id="col_container">
  <section>
    <header>
      <h1 class="vertical_header">STAFF</h1>
    </header>
    <article>
      <div class="image_container">
        <img src="">
      </div>
      <div class="info">
        <h2>Bill Smith</h2>
        <h3>Producer</h3>
        <p>Awesome corp</p>
        <p>555 67 67</p>
        <p>555 90 90</p>
        <p>CONTACT</p>
      </div>
      <p></p>
    </article>
  </section>
</div>

但它没有用，有人有想法吗？

Answer 1

使用css属性字母间距

＆＃13;

section {
    text-align: left;
}

section > header {
    float: left;
    width: 10%;
}

section article {
    float: left;
    width: 42%;
    margin: 0 1%;
}
section article div {
    width: 100%;
    margin: 0 auto;
}

.col_container {
    width: 400px;
    text-align: left;
    margin: 0 0 0 auto;
    border:1px solid black;

}

.vertical_header {
    position: relative;
    float: left;
    width: 200px;
    height: 1.5em;
    margin-bottom:-1em;
    line-height: 1.5em;    
    text-align: justify;
    text-align-last: justify;
    left: 0;
    top: 205px;
    font-weight: lighter;
    -webkit-transform: rotate(-90deg);	
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: left top 0;
letter-spacing: 40px;
}

.vertical_header:after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 100%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.image_container {
    width: 150px;
    height: 225px;
    background-color: #cccccc;
}

.info h2{
    font-size: 1em
}

.info h2, .info h3, .info p {
    text-align: center;
}

.info h3, .info p {
    font-weight: lighter;
    font-size: 0.8em;
}

.info p {
    line-height: 0.4;
}

＆＃13;

<div id="col_container">
  <section>
    <header>
      <h1 class="vertical_header">STAFF</h1>
    </header>
    <article>
      <div class="image_container">
        <img src="">
      </div>
      <div class="info">
        <h2>Bill Smith</h2>
        <h3>Producer</h3>
        <p>Awesome corp</p>
        <p>555 67 67</p>
        <p>555 90 90</p>
        <p>CONTACT</p>
      </div>
      <p></p>
    </article>
  </section>
</div>

＆＃13;

Answer 2

如果你可以在字母之间留空格，你可以使用letter-spacing 如下所示..希望它有所帮助

＆＃13;

section {
    text-align: left;
}

section > header {
    float: left;
    width: 10%;
}

section article {
    float: left;
    width: 42%;
    margin: 0 1%;
}
section article div {
    width: 100%;
    margin: 0 auto;
}

.col_container {
    width: 400px;
    text-align: left;
    margin: 0 0 0 auto;
    border:1px solid black;

}

.vertical_header {
    position: relative;
    float: left;
    width: 200px;
    height: 1.5em;
    margin-bottom:-1em;
    line-height: 1.5em;    
    text-align: justify;
    text-align-last: justify;
    left: 0;
    top: 205px;
    font-weight: lighter;
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: left top 0;
    letter-spacing: 37px;
}

.vertical_header:after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 100%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.image_container {
    width: 150px;
    height: 225px;
    background-color: #cccccc;
}

.info h2{
    font-size: 1em
}

.info h2, .info h3, .info p {
    text-align: center;
}

.info h3, .info p {
    font-weight: lighter;
    font-size: 0.8em;
}

.info p {
    line-height: 0.4;
}

＆＃13;

<html>
<head>
</head>
<body>
<div id="col_container">
  <section>
    <header>
      <h1 class="vertical_header">STAFF</h1>
    </header>
    <article>
      <div class="image_container">
        <img src="">
      </div>
      <div class="info">
        <h2>Bill Smith</h2>
        <h3>Producer</h3>
        <p>Awesome corp</p>
        <p>555 67 67</p>
        <p>555 90 90</p>
        <p>CONTACT</p>
      </div>
      <p></p>
    </article>
  </section>
</div>
</body>

</html>

＆＃13;

使用垂直显示对齐一行文本

2 个答案: