我有两个div - 一个用于内容文本，一个用于此文本的标题。
///////////////////
/ ........ /
/ . . . . /
/ .div1 . . 2. /
/ ........ /
///////////////////
第二个div应该保持在div1高度的中心位置，并且位于右侧的绝对位置。
div的2内容也在90度旋转。
注意：.textFull是主要内容文字div，div.tit是第二个标题div。
.textFull{
float:left;
z-index:15;
display:block;
font-size: calc(2vh + 2vw);
margin-top:100vh;
width:80vw;
background-color: #141414;
color:white;
opacity:0.7;
border-top-right-radius:0.2em;
border-bottom-right-radius:0.2em;
padding:1vw;
}
div.tit{
position:absolute;
z-index:15;
transform:rotate(90deg);
font-size: calc(2vh + 2vw);
float:right;
top:120vh;
background-color: #141414;
color:white;
opacity:0.7;
right:0;
}
How it looks like in my project
这是html：
<body id='random'>
<div id='an'></div>
<h1 id='header'>Hi. I'm Atanas Bobev</h1>
<div class='textFull'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat aliquam enim at porttitor. Aenean nec turpis ipsum. Donec egestas pharetra tellus id scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam ornare arcu sit amet massa finibus lacinia. Maecenas sed magna metus. Pellentesque id lectus libero. Donec semper est magna, efficitur varius ipsum ultricies eleifend. Maecenas non dictum tellus, sed vulputate erat. Proin sed pharetra augue.</div>
randombg();
const maxFiles = 159;
const randomEl = document.getElementById("random");
function randombg() {
var random = Math.floor(Math.random() * maxFiles)+1;
randomEl.style.backgroundImage = `url('image/(${random}).jpeg')`;
}
$(document).ready(function(){
$('#header').typewrite({
blinkingCursor:false,
selectedBackground:"#141414",
selectedText:"#ffffff",
actions: [
{delay: 1000},
{type: 'Hello.'},
{delay: 1000},
{remove: {num: 6, type: 'stepped'}},
{delay: 1000},
{type: "I'm Atanas Bobev"},
{delay: 1000},
{remove: {num: 12, type: 'stepped'}},
{delay: 1000},
{type: "31 years old."},
{delay: 1000},
{remove: {num: 13, type: 'stepped'}},
{delay: 1000},
{type: "web designer."},
{select: {from: 26, to: 47}}
]
});
});
@font-face {
font-family:TypeFont;
src: url(fonts/Lobster-Regular.ttf);
}
*{margin:0;padding:0;transition:1s;font-family:TypeFont;overflow-y:auto;overflow-x:hidden;}
html,head,body{
height:100%;
width:100%;
}
#an{
position:fixed;
background: linear-gradient(229deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
background-size: 7400% 7400%;
animation: backgroundGardient 400s ease infinite;
z-index:-10;
opacity:0.5;
width:99vw;
height:100%;
-webkit-animation: backgroundGardient 400s ease infinite;
-moz-animation: backgroundGardient 400s ease infinite;
-o-animation: backgroundGardient 400s ease infinite;
animation: backgroundGardient 400s ease infinite;
}
@-webkit-keyframes backgroundGardient {
0% {
background-position: 0% 83%
}
50% {
background-position: 100% 18%
}
100% {
background-position: 0% 83%
}
}
@-moz-keyframes backgroundGardient {
0% {
background-position: 0% 83%
}
50% {
background-position: 100% 18%
}
100% {
background-position: 0% 83%
}
}
@-o-keyframes backgroundGardient {
0% {
background-position: 0% 83%
}
50% {
background-position: 100% 18%
}
100% {
background-position: 0% 83%
}
}
@keyframes backgroundGardient {
0% {
background-position: 0% 83%
}
50% {
background-position: 100% 18%
}
100% {
background-position: 0% 83%
}
}
#jquery-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #316594;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
.jquery-script-center {
width: 960px;
margin: 0 auto;
}
.jquery-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.jquery-script-center a {
text-decoration:none;
}
.jquery-script-ads {
width: 728px;
height:90px;
float:right;
}
.jquery-script-clear {
clear:both;
height:0;
}
#random{
position:fixed;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 100vw;
min-height: 100vh;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
font-size:calc(1vh + 1vw);
}
#header > span.blinkingCursor{
display:none;
}
h1#header{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #ecf0f1;
color: black;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
border: 20px solid #ecf0f1;
font-size: calc(2vh + 2vw + 1vmax + 0.5em);
font-weight: 100;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.textFull{
float:left;
z-index:15;
display:block;
font-size: calc(2vh + 2vw);
margin-top:100vh;
width:80vw;
background-color: #141414;
color:white;
opacity:0.7;
border-top-right-radius:0.2em;
border-bottom-right-radius:0.2em;
padding:1vw;
}
div.tit{
position:absolute;
z-index:15;
transform:rotate(90deg);
font-size: calc(2vh + 2vw);
float:right;
top:120vh;
background-color: #141414;
color:white;
opacity:0.7;
right:0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<meta charset='utf-8'>
<script type="text/javascript" src="script/typeout.min.js"></script>
<script type="text/javascript" src="script/typewrite.min.js"></script>
<script type="text/javascript" src="script/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="script/typewrite.js"></script>
<head>
<style>
</style>
</head>
<body id='random'>
<div id='an'></div>
<h1 id='header'>Hi. I'm Atanas Bobev</h1>
<div class='textFull'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat aliquam enim at porttitor. Aenean nec turpis ipsum. Donec egestas pharetra tellus id scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam ornare arcu sit amet massa finibus lacinia. Maecenas sed magna metus. Pellentesque id lectus libero. Donec semper est magna, efficitur varius ipsum ultricies eleifend. Maecenas non dictum tellus, sed vulputate erat. Proin sed pharetra augue.</div>
<div class='tit'>Who i am?</div>
<script>
</script>
</body>
</html>
<div class='tit'>Who i am?</div>
*我知道由于文件丢失而导致js错误
答案 0 :(得分：0)
我没有使用你所有的代码，因为我不知道它是什么，但我已经分享了你可以用来实现你想要的容器和布局。
.inflex {
display: flex;
/*Center the items in the div.inflex*/
align-items: center;
background: #dc3;
}
.textFull {
flex-basis: 90%;
background: #ba3;
}
.tit {
flex: 1;
/*Center the items in the div using flex*/
display: flex;
align-items: center;
}
/*Rotate the content to 90 deg*/
.tit > div {
transform: rotate(90deg);
text-align: center;
background: #a03;
}<body id='random'>
<div id='an'></div>
<h1 id='header'>Hi. I'm Atanas Bobev</h1>
<!--Added the div.inflex so I can use flexbox to put the boxes side by side and center the content-->
<div class="inflex">
<div class='textFull'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat aliquam enim at porttitor. Aenean nec turpis ipsum. Donec egestas pharetra tellus id scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam ornare arcu sit amet massa finibus lacinia. Maecenas sed magna metus. Pellentesque id lectus libero. Donec semper est magna, efficitur varius ipsum ultricies eleifend. Maecenas non dictum tellus, sed vulputate erat. Proin sed pharetra augue.</div>
<div class='tit'>
<div>Who i am?</div>
</div>
</div>
</body>