个人中心
gpt4 book ai didi

html - 如何在标题下方对齐网页上的内容

转载 作者：行者123 更新时间：2023-11-28 03:03:51 24 4
gpt4 key购买 nike

我最近注册了一个网络类(class)。目前正在学习html5和css。我必须制作 3 个网页；主要，关于我和爱好。我已经根据他们给我的规范创建了很多他们要求的东西，但我有一个问题；某些内容未显示在应有的位置。我试过 position: relative, position: absolute 等，并使用 bottom: 500px 等修改了它的位置，但它看起来不对。例如，在下面的代码中，这是我的“关于我”页面。侧面的图片目前没有与主要文章的顶部正确对齐。这些图片位于主要文章之外，这是正确的，但它位于下方。这种情况在我的表格元素网页中随处可见。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>About Me</title>

  <link property="stylesheet" rel ="stylesheet"     href="cascadingstylesheet.css"/>
  <!--[if   lt  IE  9]> 
<script src="hpp://html5shiv.googlecode.com/svn/trunk/html5.js">    
</script>   
<![endif]-->    
</head>

<body>
<header>
<h1>About Me</h1>
<nav>
<ul>
<li><a href="Main">Main</a></li>
<li><a href="About me">About me</a></li>
<li><a href="Hobbies.html">Hobby</a></li>
</ul>
</nav>
</header>
<hr>

<main>
<!--
Below I have used the article tag and the section tag. The article tag is         nested inside
the section tag. This is because section tags are used to group related     elements together
and the 3 articles are related since they contain information about me.
I didn't include one article tag because the articles are distinct from one     another. E.g. One of the
article contains the types of mototbikes but another article tells the user     information about me. !-->
    <section title="border" id="aboutArticle">

<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p></article>
<br>

<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p>    </article>
<br>

<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p>
<p>This blog was created on 

<time datetime="10-10-2015 20:00"> 

the 10th of October 2015.</time></p>

<section>
<img id="motorbikePic" width="350" alt="Harley Davidson Logo     "src="http://media1.santabanta.com/full5/Bikes/Harley%20Davidson/harley-    davidson-82a.jpg"></img>
</section>
</article>
</section>

<!--
I have used the aside tag on my About page. Inside the tag there are images     containing my 
favourite types of cars. I did not include it in the article tag above     because it's not necessarily 
related to it since I said I like motobikes and not muscle cars.!-->
<aside title="cars">
<h3>My favourite cars:</h3>
<img src="http://gas2.org/wp-content/uploads/2014/07/challenger-hellcat.png"     width="300" alt="Dodge Hellcat">
<br>
<img     src="http://cartype.com/pics/6596/full/ford_mustang_shelby_gt500_f1_10.jpg" width="300" alt="Ford Shelby GT500">
<br>
<img src="http://www.forodefotos.com/attachments/chevrolet/14617d1289420971-    camaro-2010-camaro-2010.jpg" alt="Chevrolet Camero" width="300">
</aside>

</main>


<!-- 
Footer tag is used at the bottom of the page since it more appropriate to         use it at the bottom since
you are given more options such as contacting the web developer, in this     case it is me. 
!-->
<footer>
<hr>
<p>To get in touch with me you can click below:</p>
<a href="mailto:w1@my.uk">Click to email me!</a>
</footer>
</body>



</html>

这是我的 CSS。我的 CSS 包含一些适用于我其他页面的规则，所以我粘贴了相关的规则，以便你们阅读。这些是上面代码的相关规则，但可能缺少一些规则，所以如果你们需要的话，我也会发布整个 css。

上面代码的CSS:

footer{
position: absolute;
right: 0;
bottom: -250px;
left: 0;
padding: 10px; 
text-decoration:none;
}

#aboutArticle{
width:75%;
}

[title^="cars"]{
float:right;
margin: 0 1.5%;
position:relative;
bottom:505px;
}

[title^="bord"]{
border-style: dotted;
border-radius: 10px 30px;
}

body{   
background: -webkit-linear-gradient(left, #4B0082, black , #4B0082); /* For       Safari 5.1 to 6.0 */
background: linear-gradient(to right, #4B0082 , black, #4B0082); /*standard     syntax*/
text-align: center;
padding-bottom:60px;
font-size:20px;
}

最佳答案

只需添加一个属性并删除另一个属性。

将 float:left; 添加到 #aboutArticle 并从 [title^="cars"] 中删除 bottom:505px;

关于html - 如何在标题下方对齐网页上的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33446352/

24 4 0
文章推荐： php - 使用 $.post() 的 JQuery POST 表单
文章推荐： CSS 模块如何从另一个文件的选择器级联？
文章推荐： css - 基于 PX 的 REM 计算容器宽度不正确
文章推荐： javascript - 删除 html 自动对焦使用 javascript/jquery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com