我坚持相对分工,我需要它的内容尺寸。
我已经尝试过在其他问题上提出的一些解决方案,例如使用flex-boxes,table-columns,inline block或float,但这些解决方案都不适用于我,因为我必须在容器上放置最大宽度或者他们将保持内联(我不能这样做,如果我这样做,我不会得到想要的结果)并且我不熟悉桌面显示。
我需要它在相对位置,但它总是采取父母的宽度和高度。如果你有任何建议,我会自愿听到。
HTML
<div class="main" id='mainContainer'>
<div id="home" class="page_container homePage" name='Home'>
<a class='arrow'></a>
<div class='homePageSVG'></div>
<div class='homepageTitle'><div><p class='Hname'>Monsieur Coco</p><p class='Hjob'>Développeur Web</p></div></div>
<p class='noteDev'>Blablablabla</p>
</div>.....other .page_containers</div>
CSS
.homepageTitle{
left:50%;
top :80%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: relative;
z-index: 18;
display: block;
width: auto;
margin: 0;
padding: 0;
font-family: 'Avenir Next LT Pro Bold';
text-transform: uppercase;
font-weight: 600;
font-size: 5.5em;
}
.homepageTitle > div,p{
text-transform: lowercase;
margin: 0;
padding: 0;
width: auto;
}
.Hname{
}
.Hjob{
font-size: .5em;
border-top: solid thin;
border-bottom: solid thin;
}
有更多的CSS,但它主要是伪元素,我不认为它们在这里有任何用处,但它们是在Fiddle中。
答案 0 :(得分:0)
如何使用display:flex和一些阴影和渐变作为图形部分的基础?
html,body {
height:100%;
width:100%;
margin:0;
}
body {
background:
linear-gradient(45deg,black 45%, transparent 45%),
linear-gradient(-45deg,black 45%, transparent 45%),
linear-gradient(-135deg,black 45%, transparent 45%),
linear-gradient(135deg,black 45%, transparent 45%) #096CA7;
}
body, main {
color:white;
display:flex;
flex:1;
align-items:center;
justify-content:center;
flex-direction:column;
}
h1:before,
h1:after {
content:'';
display:inline-block;
vertical-align:middle;
margin:0 0.1em;
width:0.75em;
height:0.2em;
box-shadow:0 0.05em 0 ,-0.5em -0.15em 0 -0.05em,0 -0.1em ;
}
h1:after {
box-shadow:0 0.05em 0 ,0.5em -0.15em 0 -0.05em,0 -0.1em ;
}
p {
box-shadow:0 -0.1em, 0 0.1em ;
padding:0.1em;
width:12em;
}
h1, p {
margin:0;
text-align:center;
}
<main>
<h1>Monsieur coco</h1>
<p>Dévelloppeur WEB</p>
</main>
<footer>FOOTER</footer>