Question

我坚持相对分工，我需要它的内容尺寸。我已经尝试过在其他问题上提出的一些解决方案，例如使用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中。

这是希望的结果（绝对位置）：Fiddle
这是获得的结果（相对位置）：Fiddle
谢谢你的帮助。

Answer 1

如何使用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>

如何进行相对分割取其内容的高度和宽度？

1 个答案: