我试图让 2 个旁边的元素(灰色和黄色 - class="soundLogoContainer, iAmSam"都有类“columnDiv”)位于标题元素下方。 2 个 aside 元素是 main 标签的子元素，header 等于 main 标签。
我使用过 float 、内联 block 和内联表方法。每种方法都会使子标签扭曲或偏移，而不是位于标题下方的相同高度。
我怎样才能使两边在标题标签(粉红色)下的位置相同？
谢谢
<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;
}
}
最佳答案
现在这被称为 position: absolute; 在你用 position: relative; 在 their parent 描述的两个元素上分区
这将使他们都回到属于他们的地方。
顺便说一句，如果你使用 f.e. 顶部:0； right: 0; 不需要 float: right;。
最好的问候，
关于html - 如何使 2 个子元素在没有偏移的情况下位于顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37371331/