如何使 2 child 个元素在没有偏移的情况下位于顶部？

Question

我正在尝试让 2 个旁边的元素（灰色和黄色 - class="soundLogoContainer, iAmSam" 都有 class of "columnDiv"）放在 header 元素。 2个aside元素是主标签的children，header等于主标签。

我用过float、inline-block和inline-table方法。每种方法都会使 child 旁边的标签扭曲或偏移，而不是位于 header 下方的相同高度。

我怎样才能让两边都在 header 标签（粉红色）下？

代码笔是here and a fiddle here

谢谢

<body>

<!------------------------------------------------------------------------->
<!--HEADER consists of h1 logo (text). They are seperated witha span so to edit text seperately-->
<header>

         <h1 role="button" title="BGDR creative"><span class="BGDR">BGDR</span> <br> <span class="creative">creative</span>
      </h1>

        <img class="responsMenu" src="../assets/icons/respive_icon.svg" alt="dropdown menu" title="menu" role="menu">  

</header>




<!------------------------------------------------------------------------->
<!--The MAIN is the parent element to 2 asides that are meant to RELATIVELY be top 0 under the header (this does not work - it breaks and there is an offset-->

<main>

    <!--"soundLogo..." is supposed to be top 0 and left 0 / float left-->
    <aside class="soundLogoContainer columnDiv">
        <div class="soundIcn"></div><!--a circle icon of a soundwave-->
    </aside>

    <!--"iAmSam" is supposed to be top 0 and right 0 / float right-->
    <aside class="iAmSam columnDiv">
        <p><span class="myNameTxt homeText">MY NAME IS SAM</span></p>
        <p><span class="iMakeTxt homeText">I MAKE STUFF</span></p>
        <p><span class="soundTxt homeText">SOUND</span></p>
        <p><span class="animationTxt homeText">VISUAL</span></p>
        <p><span class="phototxt homeText">PHOTO</span></p>
        <p><span class="webtxt homeText">WEB</span></p>
    </aside>

    <!--"homeSkillContainer div is a parent element to the SVG and should be RELATIVELY top 0 at the bottom of the page. It includes 1 svg of 4 images-->
    <div class="homeSkillContainer">

        <!--SVG child element container-->
        <div class="skillIcons4x4">

            <!--SVG IMAGE-->
            <svg id="Artboard_1" data-name="Artboard 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 215.66 164.68"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:3px;}</style></defs><title>home(mobile_port)</title><g id="animation_icon_Image" data-name="animation_icon Image"><circle class="cls-1" cx="38.59" cy="82.52" r="37.09"/><rect id="animeBox" class="cls-1" x="18.45" y="66.77" width="39.06" height="39.06" rx="7.62" ry="7.62"/><path id="animeBoxLine" class="cls-1" d="M28.39,60.26H51.31A12.72,12.72,0,0,1,64,73V95.89"/><circle class="cls-1" cx="177.07" cy="82.52" r="37.09"/><path id="leftBracket" class="cls-1" d="M164.18,71.7l-6.8,3.93-6.81,3.91a3.49,3.49,0,0,0,0,6.06l6.81,3.91,6.81,3.91"/><line id="forwardSlash" class="cls-1" x1="184.55" y1="74.36" x2="171.03" y2="90.58"/><path id="rightBracket" class="cls-1" d="M190,93.28l13.63-7.79a3.49,3.49,0,0,0,0-6.06L190,71.65"/><circle class="cls-1" cx="107.91" cy="38.59" r="37.09"/><rect id="filmBody" class="cls-1" x="86.16" y="33.44" width="37.37" height="23.36" rx="4.94" ry="4.94"/><circle id="leftCamCircle" class="cls-1" cx="94.46" cy="25.13" r="8.18"/><circle id="rightCamCircle" class="cls-1" cx="113.15" cy="25.13" r="8.18"/><path id="filmLens" class="cls-1" d="M132.88,52.77l-9.35-3.12V40.31l9.35-3.12a3.55,3.55,0,0,1,4.67,3.37v8.83A3.55,3.55,0,0,1,132.88,52.77Z"/><circle class="cls-1" cx="107.91" cy="126.1" r="37.09"/><rect id="camBody" class="cls-1" x="80.36" y="109.47" width="55.1" height="34.44" rx="7.27" ry="7.27"/><path id="camButton" class="cls-1" d="M87.63,109.28V105.9a2.12,2.12,0,0,1,2.12-2.12h6a2.12,2.12,0,0,1,2.12,2.12h0v3.38"/><circle id="camLens" class="cls-1" cx="107.91" cy="127.45" r="12.05"/></g></svg>
        </div>

    </div>

</main>


</body>

* { 
    margin:0 ;
    padding:0;
}

body {
    width: 100%;
}

header {
    width:100%;
}

h1, h2, h3, h4, p {
    font-family: josefin-sans, sans-serif;

}

header h1 {
    font-weight: 300;
    font-size: 55px;
    width: 165px;
    position: absolute;
    left: 25px;
}


.BGDR {
    letter-spacing: 4px;
    line-height: 0px;
    height: 0px;
}

.creative {
    position: relative;
    top: -25px;
}

/*mobile device*/
@media (max-width:414px){
header {
    height:100px;

}

header h1 {
    font-weight: 300;
    font-size: 40px;
    width: 165px;
    position: absolute;
    left: 15px;
}

.BGDR {
    letter-spacing: 3px;
    line-height: 0px;
    height: 0px;
}

.creative {
    position: relative;
    top: -25px;
}
body header {
    height: 80px;
    background-color: pink;
}

body main {
    background-color: skyblue;
    display: inline-table;
    width: 100%;
}

.columnDiv {
    display: inline-table;
    width: 50%;
    height: 140px;
}

.soundLogoContainer {
    background-color: grey;
}

.iAmSam {
    background-color: yellow;
}

.soundIcn {
    background-image: url(../assets/icons/sound_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: 139px;
    width: 133px;
    margin: 0 auto;
}



.homeSkillContainer {
    top: 0px;
    width: 100%;
    height: 241px;
    background-color: orange;
}
.imgtextIMAKE {
    position: relative;
    top: 0px;
    margin: 0 auto;
    width: 96%;
    height: 90%;
}
.iAmSam.columnDiv .myNameIsSam {
    position: relative;
    top: 10%;
    margin: 0 auto;
    height: 86%;
}
.iAmSam {
    text-align: right;
}

#Artboard_1 {
}

.myNameTxt {
    font-size:20px;

}

.iMakeTxt {
    font-size: 21px;
    letter-spacing: 2.2px;
}
.soundTxt, .animationTxt, webTxt {
    font-size:25px;

}


.phototxt {
    font-size:21px;
}

.webtxt {
    font-size:25px;
}
.homeText {
    padding-top: 0;
    padding-right: 11px;
    padding-left: 0;
    padding-bottom: 0;
}

}



/*Tablet view*/
@media (min-width:415px) and (max-width:949px){

}



/*Desktop view*/
@media (min-width: 950px){
}


/*For the responsive menu*/

@media (max-width: 719px){

.responsMenu {
    width: 40px;
    height: 40px;
    position: relative;
    float: right;
    right: 30px;
    top: 30px;
}



}

@media (min-width: 719px){
    .responsMenu {
        display:none;
    }
}


/*TEXT QUERIES*/


/*Blackberry width*/

@media (max-width: 349px){

    .myNameTxt {
    font-size:18.2px;

}

.iMakeTxt {
    font-size: 19.6px;
    letter-spacing: 1.9px;
}
.soundTxt {
    font-size:25px;

}

.animationTxt {
    font-size:25px;
}

.phototxt {
    font-size:21px;
}

.webtxt {
    font-size:25px;
}

}

Answer 1

现在，这在您描述的两个元素上都称为 position: absolute;，在 它们的 父 div 上使用 position: relative;。

这将使他们都回到属于他们的地方。

顺便说一句，如果你使用 f.e。 top: 0; right: 0; 不需要 float: right;.

此致，

如何使 2 child 个元素在没有偏移的情况下位于顶部？

How to make 2 child elements to be be top without an offset?

html

css

position

css-float

display