小贝子编程

使用浮动标记时内容未正确向下对齐



这是我的第一篇文章，如果我不能很好地解释我的问题，我很抱歉。我一直试图设计一个页面，将albumTitle和xhapyArtist类分组在一边，而日期和运行时分组在另一边。我试着使用float和padding来实现这一点，它确实适用于一个条目，但如果我尝试复制该条目，它将不会垂直排列，并且它基本上会在页面上从左到右显示。有更有效的方法吗？lmk。

HTML:

<!DOCTYPE html>
<html>
<head>
<title>xhapy's discography</title>
<meta charset="UTF-8">
<meta name="author" content="xhapy">
<meta name="description" content="xhapy's discography, site coded by xhapy">
<meta name="keywords" content="xhapy, Music, Electronic music, Producer, Artist, xhapy artist, xhapy producer, xhapy albums, xhapy discography, Rap, Hip-Hop, Ambient">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<!-- 
HEADER SECTION:
-   Title
-   Short comment below title
-->

<hr id="headerbreak1">
<h1 class="content" id="discTitle">discography</h1>
<hr id="headerbreak2">

<h2 id="discH2">list of my music dating back to 2017</h2>
<hr class="content" id="visibleDivider">

</div>

<div id="discography"> 

<!--
DISCOGRAPHY SECTION:
- The discography section will be sorted from the most
recent year.
-->

<h1 id=year>2022</h1>
<div id="album">
<h2 id="left" class="albumTitle"><a class="albumTitle" href="https://distrokid.com/hyperfollow/xhapy/lostfound-tape" target="_blank">lost&found tape</a></h2>
<h3 id="left" class="xhapyArtist"><a class="xhapyArtist" href="xhapy.com" target="_blank">xhapy</a></h3>
<h2 id="right" class="date">September 2022</h2>
<h3 id="right"  class="runtime">36:28</h3>
</div>
<div id="album">
<h2 id="left" class="albumTitle"><a class="albumTitle" href="https://distrokid.com/hyperfollow/xhapy/lostfound-tape" target="_blank">lost&found tape</a></h2>
<h3 id="left" class="xhapyArtist"><a class="xhapyArtist" href="xhapy.com" target="_blank">xhapy</a></h3>
<h2 id="right" class="date">September 2022</h2>
<h3 id="right"  class="runtime">36:28</h3>
</div>
<div id="album">
<h2 id="left" class="albumTitle"><a class="albumTitle" href="https://distrokid.com/hyperfollow/xhapy/lostfound-tape" target="_blank">lost&found tape</a></h2>
<h3 id="left" class="xhapyArtist"><a class="xhapyArtist" href="xhapy.com" target="_blank">xhapy</a></h3>
<h2 id="right" class="date">September 2022</h2>
<h3 id="right"  class="runtime">36:28</h3>
</div>

</div>

</body>
</html>

CSS：

/* STYLE FOR xhapy WEBSITE */
body {
background-color:black;
color:white; 
}
th {
width: 150px;
border: 1px solid #370404;
padding: 5px;
}
.content {
width:900px;
margin:0  auto
}
.header {
text-align:center;

}
.latest {
text-align:center;
}
.pages {
text-align:center;
}
.table {
margin-left: auto;
margin-right: auto;
border-spacing: 0 15px;
border-collapse: separate;
}
#left{
float: left;
padding-left:500px;
}
#right{
float: right;
padding-right:500px;
}
#title {
font-size:110px;
}
#discTitle {
font-size:110px;
color:#FFC6C6;
}
#headerbreak1 {
border:black;
margin: 100px;
}
#headerbreak2 {
border:black;
margin: 10px;
}
#discH2{
color:#FFE2E2;
}
#visibleDivider {
border-color:darkslategray;
margin-top: 60px;
margin-bottom: 60px;
}
#xhapyRelease {
background-color:#071192;
}
#triiwaveRelease {
background-color:#600000;
}
#xhapyHyperlink {
color:#B5B8DC;
}
#triiwaveHyperlink {
color:#FF6F6F;
}
#discHyperlink {
color:#BB4B4B;
}
#galleryHyperlink {
color:#BB4B4B;
}
/* DISCOGRAPHY FORMAT */
#year{
padding-left:500px;
padding-bottom:25px;
font-size:50px;
}
#album{
}
.albumTitle {
color:#EA8DFF;
padding: 0;
margin: 0;
line-height: 0px;
}
.xhapyArtist {
color:#C154FF;
}
.triiwaveArtist {
color:#FF5454;
}
.date{
color:#637671;
padding: 0;
margin: 0;
line-height: 0px;
}
.runtime{
color:#4D5C58;
}

我想它看起来像这样和这就是现在的样子

再次抱歉，如果我的代码到处都是，我是一个非常新的html/css编码器。非常感谢您的帮助

试试这个：

/* STYLE FOR xhapy WEBSITE */
body {
background-color:black;
color:white; 
}    
th {
width: 150px;
border: 1px solid #370404;
padding: 5px;
}    
.content {
width:900px;
margin:0  auto
}    
.header {
text-align:center;        
}    
.latest {
text-align:center;
}    
.pages {
text-align:center;
}   
.table {
margin-left: auto;
margin-right: auto;
border-spacing: 0 15px;
border-collapse: separate;
} 
#title {
font-size:110px;
}
#discTitle {
font-size:110px;
color:#FFC6C6;
}
#headerbreak1 {
border:black;
margin: 100px;
}    
#headerbreak2 {
border:black;
margin: 10px;
}    
#discH2{
color:#FFE2E2;
}    
#visibleDivider {
border-color:darkslategray;
margin-top: 60px;
margin-bottom: 60px;
}    
#xhapyRelease {
background-color:#071192;
}    
#triiwaveRelease {
background-color:#600000;
}    
#xhapyHyperlink {
color:#B5B8DC;
}    
#triiwaveHyperlink {
color:#FF6F6F;
}    
#discHyperlink {
color:#BB4B4B;
}    
#galleryHyperlink {
color:#BB4B4B;
}
/* DISCOGRAPHY FORMAT */
#year{
padding-left:15%;
padding-bottom:25px;
font-size:50px;
}
#album{
display: flex;
justify-content: space-between;
width: 70%;
margin: auto;
}
.albumTitle {
color:#EA8DFF;
padding: 0;
margin: 0;
line-height: 0px;
}
.xhapyArtist {
color:#C154FF;
}
.triiwaveArtist {
color:#FF5454;
}
.date{
color:#637671;
padding: 0;
margin: 0;
line-height: 0px;
}
.runtime{
color:#4D5C58;
}
<head>
<title>xhapy's discography</title>
<meta charset="UTF-8">
<meta name="author" content="xhapy">
<meta name="description" content="xhapy's discography, site coded by xhapy">
<meta name="keywords" content="xhapy, Music, Electronic music, Producer, Artist, xhapy artist, xhapy producer, xhapy albums, xhapy discography, Rap, Hip-Hop, Ambient">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<hr id="headerbreak1">
<h1 class="content" id="discTitle">discography</h1>
<hr id="headerbreak2">            
<h2 id="discH2">list of my music dating back to 2017</h2>
<hr class="content" id="visibleDivider">            
</div>       
<div id="discography">             
<h1 id=year>2022</h1>
<div id="album">
<div id="left">
<h2 id="" class="albumTitle"><a class="albumTitle" href="https://distrokid.com/hyperfollow/xhapy/lostfound-tape" target="_blank">lost&found tape</a></h2>
<h3 id="" class="xhapyArtist"><a class="xhapyArtist" href="xhapy.com" target="_blank">xhapy</a></h3>
</div>
<div id="right">
<h2 id="" class="date">September 2022</h2>
<h3 id=""  class="runtime">36:28</h3>
</div>
</div>
<div id="album">
<div id="left">
<h2 id="" class="albumTitle"><a class="albumTitle" href="https://distrokid.com/hyperfollow/xhapy/lostfound-tape" target="_blank">lost&found tape</a></h2>
<h3 id="" class="xhapyArtist"><a class="xhapyArtist" href="xhapy.com" target="_blank">xhapy</a></h3>
</div>
<div id="right">
<h2 id="" class="date">September 2022</h2>
<h3 id=""  class="runtime">36:28</h3>
</div>
</div>
<div id="album">
<div id="left">
<h2 id="" class="albumTitle"><a class="albumTitle" href="https://distrokid.com/hyperfollow/xhapy/lostfound-tape" target="_blank">lost&found tape</a></h2>
<h3 id="" class="xhapyArtist"><a class="xhapyArtist" href="xhapy.com" target="_blank">xhapy</a></h3>
</div>
<div id="right">
<h2 id="" class="date">September 2022</h2>
<h3 id=""  class="runtime">36:28</h3>
</div>            
</div>    
</div>    
</body>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium