Question

我有几个问题：

如何使下面的图像不干扰导航栏？我尝试了各种高度调整，它不会移动。
如何将文本读取为与右侧对齐的段落以及图像的下部和左侧 - 换句话说，段落和图像彼此平行。这会包含JavaScript吗？
我还需要H1的对齐方面的帮助。

到目前为止，我只使用过CSS和HTML - 我到处研究过，无法找到我的解决方案。难以理解的是我知道自己想要什么，但不知道用于找到解决方案的术语。任何帮助表示赞赏！这是我的CSS代码：

    body{
background-color: #2F3A3B;
text-align: justify;
width: 800px;


text-decoration: none;
color: white;
font-family:'Oswald', sans-serif;

}
    ul {
display: inline-block;
list-style-type: none; 
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}

li {
float: left;

}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover{
background-color: #111;
}

h1{
text-align: relative;

}

.circular--portrait {
 position: relative;
 width: 200px;
 height: 200px;
 overflow: hidden;
 border-radius: 50%;  
}

.circular--portrait img {
  width: 100%;

}

p{
position:relative;
left: 200px;
top: 40px;
}

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>About Eddie Munoz</title>
<link rel="stylesheet" type="text/css" href="about.css">
</head>

<div class="circular--portrait">
<img src="images/idpic.jpg">
</div>

<body>

<ul>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

<div class= "column-one">
 <p>Eddie Munoz has been creating art from the age of 13. While he was 
 completing his Bachelors of Applied Science in Human Relations he was 
 freelancing on the side. Eddie has created numerous character artists. 
 ljaldjflakjfldjf;lajf;lkjd;</p>
</div>



<div class="column-two">
<h1>What others are saying</h1>
<p>"Eddie is the best young talent I have had the pleasure to work with. He 
has a great eye for detail and really finds the fun in whatever project he 
is given no matter the size. Eddie strives to learn every nuance of 3D 
gaming tech as well as distributing that knowledge once learned. Eddie is an 
amazing talent that is bound for superstar status." - Billy Ashlswede, Art 
Lead at Riot Games</p>
<p>"Eddie was a highly valued Character Artist with proficiency in many 
different modeling programs. He was a very dedicated artist who frequently 
helped others and went out of his way to produce additional assets for our 
game. Eddie has not only a very technical, but also a very artistic mindset. 
All of these qualities make Eddie a great asset to any team." -Kyle Sarvas, 
Game Artist/Game Designer</p>
</div>

</body>
</html>

Answer 1

我对您的HTML进行了一次更改：

在circular--portrait

column-one

还有几个你的CSS：

从text-align: relative;

h1

从position: relative;

.circular--portrait

要.circular--portrait设置宽度为25％并使其向左浮动
p的后代.column-one向右浮动，宽度为65％（正常浮动必须低于75％）
向column-two向左浮动（也可向右浮动）

body{
  background-color: #2F3A3B;
  text-align: justify;
  width: 800px;
  color: white;
  font-family:'Oswald', sans-serif;
}
ul {
  display: inline-block;
  list-style-type: none; 
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover{
  background-color: #111;
}
.circular--portrait {
  margin-top: 50px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;  
}

.circular--portrait img {
  width: 100%;
}

.circular--portrait {
  width: 25%;
  float: left;
}

.column-one p{
  width: 65%;
  float: right;
  margin-top: 150px;
  margin-left: 10px;
}

.column-two {
  float: left;
}

<!DOCTYPE html>
<html>
<head>
	<title>About Eddie Munoz</title>
	<link rel="stylesheet" type="text/css" href="j.css">
</head>

<body>

	<ul>
		<li><a href="about.html">About</a></li>
		<li><a href="gallery.html">Gallery</a></li>
		<li><a href="resume.html">Resume</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>

	<div class="circular--portrait">
		<img src="http://pngimg.com/uploads/face/face_PNG5660.png">
	</div>

	<div class= "column-one">
		 <p>Eddie Munoz has been creating art from the age of 13. While he was 
		 completing his Bachelors of Applied Science in Human Relations he was 
		 freelancing on the side. Eddie has created numerous character artists. 
		 ljaldjflakjfldjf;lajf;lkjd;</p>
	</div>



	<div class="column-two">
		<h1>What others are saying</h1>
		<p>"Eddie is the best young talent I have had the pleasure to work with. He 
		has a great eye for detail and really finds the fun in whatever project he 
		is given no matter the size. Eddie strives to learn every nuance of 3D 
		gaming tech as well as distributing that knowledge once learned. Eddie is an 
		amazing talent that is bound for superstar status." - Billy Ashlswede, Art 
		Lead at Riot Games</p>
		<p>"Eddie was a highly valued Character Artist with proficiency in many 
		different modeling programs. He was a very dedicated artist who frequently 
		helped others and went out of his way to produce additional assets for our 
		game. Eddie has not only a very technical, but also a very artistic mindset. 
		All of these qualities make Eddie a great asset to any team." -Kyle Sarvas, 
		Game Artist/Game Designer</p>
	</div>

</body>
</html>

导航栏，图像和大纲 - 包括图像

1 个答案: