VideoLib.zip我似乎无法找到一种方法让我的按钮图标与我标题的右侧对齐，同时保持左侧的“关于”“画廊”和“恢复”。
同样，有没有人知道我如何使文本在页面上均匀适合，我在右边有一个奇怪的间隙，并希望它在页面上均匀地适合。看起来我需要CSS的帮助。
HTML
body {
background-image: url("images/robot.jpg");
background-position: bottom-left;
margin-right: 200px;
text-align: justify;
width: 800px;
height: 400px;
text-decoration: none;
color: white;
font-family: 'Marvel', 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: right;
padding: 10px 13px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.circular--portrait {
margin-top: 70px;
margin-left: 30px;
width: 200px;
height: 200px;
float: left;
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;
width: 100%;
}
img {
transition: transform .5s;
}
img:hover {
transform: scale(1.75);
}
<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="https://eddiemunoz.deviantart.com/gallery/" title="Follow on
Deviant Art" target="_blank">
<img src="images/icons/deviantart.png" width="30" height="30"></a>
</li>
<li>
<a href="eddie.ark.munoz@gmail.com" title="Contact" target="_blank">
<img src="images/icons/email.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.linkedin.com/in/eddie-munoz-351a9428/"
title="Follow on Linkedin" target="_blank">
<img src="images/icons/linkedin.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on
Instagram" target="_blank">
<img src="images/icons/instagram.png" width="30" height="30">
</a>
</li>
</ul>
<div class="circular--portrait">
<img src="images/profile.jpg">
</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.</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>
答案 0 :(得分：1)
您好您可以使用nth-last-child选择器来控制子元素，因此如果您修复了图像列表，则可以使用
li:nth-last-child(-n+4) { float:right; }
这会将最后4个图像列表项移到右侧
查看以下小提琴演示
答案 1 :(得分：0)
您可以使用flexbox进行标题的布局。在第4个导航项目上使用body {
background-image: url("images/robot.jpg");
background-position: bottom-left;
/* this margin is probably why you have a gap on the right */
/* margin-right: 200px; */
text-align: justify;
width: 800px;
height: 400px;
text-decoration: none;
color: white;
font-family: 'Marvel', sans-serif;
}
ul {
display: flex;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
list-style-type: none;
}
li a {
display: block;
color: white;
padding: 10px 13px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.nav-right {
margin-left: auto;
}属性将其向右推。
<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 class="nav-right">
<a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on
Deviant Art" target="_blank">
<img src="images/icons/deviantart.png" width="30" height="30"></a>
</li>
<li>
<a href="eddie.ark.munoz@gmail.com" title="Contact" target="_blank">
<img src="images/icons/email.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank">
<img src="images/icons/linkedin.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on
Instagram" target="_blank">
<img src="images/icons/instagram.png" width="30" height="30">
</a>
</li>
</ul>{{1}}
答案 2 :(得分：0)
我创造了一个小提琴：https://jsfiddle.net/o61xr75c/
origami-toggle-fold
基本上，当您想要做这些事情时，您应该将项目分成两个或更多个容器，在这种情况下，一个容器用于左侧（仅文本），另一个容器用于右侧（仅图像）。
希望它有所帮助！
答案 3 :(得分：0)
我对结构做了很多改动。首先，考虑将标题和内容放在不同的容器中。这将使您可以更好地控制每个块。在标题中，我将链接<ul>与图标<ul>分开，并使用position:absolute将图标右移。
现在，在内容中，您必须记住清除之前使用clear:both定义的任何浮点数。在这里，我使用css grid布局创建了两列，但您可以选择任意数量的其他布局策略。
body {
background-image: url("images/robot.jpg");
text-align: justify;
text-decoration: none;
font-family: 'Marvel', sans-serif;
margin: 0px;
padding: 0px;
}
.header {
background-color: #333;
}
ul.icons {
position: absolute;
right: 0px;
}
ul.links {
height: 50px;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: right;
padding: 10px 13px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.content {
clear: both;
padding: 8px;
display: grid;
grid-template-columns: 48% 48%;
grid-column-gap: 4%;
}
.circular--portrait {
margin-top: 70px;
margin-left: 30px;
width: 200px;
height: 200px;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
}
.circular--portrait {
width: 25%;
}
.column-one p {}
.column-two {}
img {
transition: transform .5s;
}
img:hover {
transform: scale(1.75);
}<div class="header">
<ul class="links">
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="resume.html">Resume</a></li>
</ul>
<ul class="icons">
<li>
<a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank">
<img src="images/icons/deviantart.png" width="30" height="30"></a>
</li>
<li>
<a href="eddie.ark.munoz@gmail.com" title="Contact" target="_blank">
<img src="images/icons/email.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank">
<img src="images/icons/linkedin.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank">
<img src="images/icons/instagram.png" width="30" height="30">
</a>
</li>
</ul>
</div>
<div class="content">
<div class="column-one">
<div class="circular--portrait">
<img src="images/profile.jpg">
</div>
<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.</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>
</div>