Question

我尝试重新创建此网站的页面：http://www.ouiwill.com/#/about

您可以看到右侧的第一个图像与调整浏览器大小的位置保持不变。更具体地说，图像的上半部分保持在黑色背景的顶部，而整个图像始终粘在浏览器的右边缘。）好吧，在该网站上，该图像实际上移动到底部浏览器变得非常小。我不确定是否可以使用CSS实现这一点，所以我只想让我的图像始终保持在我的黄色背景的右边缘和一点点。

这是我努力实现这一目标： https://codepen.io/jennycysun/pen/BwOwve?editors=1100

虽然我的图片是响应式的，但位置会随着浏览器大小的调整而变化。如何让它保持在同一位置？

＆＃13;

body {
  background-color: #FDEA6C;
}

#header {
  font-family: 'Montserrat';
  float: left;
  padding: 22px 90px;
}

h1 a {
  color: white;
  text-decoration: none
}

h1 a:hover {
  color: #D3D3D3;
}

.nav-bar ul {
  font-family: 'Montserrat';
  list-style-type: none;
  margin: 0;
  padding: 0px 50px;
  overflow: hidden;
}

.nav-bar ul li a {
  color: white;
  display: block;
  text-align: center;
  padding: 35px 0px 20px;
  text-decoration: none;
  float: right;
  font-size: 16px;
  margin-right: 50px;
}

.nav-bar ul li a:hover {
  color: #D3D3D3;
  border-bottom: 1px solid #D3D3D3;
  padding-bottom: 10px;
}

.quote {
  color: white;
  font-family: 'Cardo';
  font-size: 40px;
  padding-left: 90px;
}


/*code below is relevant to the question*/

.about {
  color: DarkGray;
  font-family: 'Cardo';
  font-size: 22px;
  padding-top: 40px;
  padding-left: 50px;
  margin-right: 25%;
}

.profile img {
  width: 55%;
  margin-left: 84%;
  margin-top: -350px;
}

.about-bg {
  background-color: white;
}

＆＃13;

<html>

<head>
  <title>HTML</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="https://use.fontawesome.com/9f2ccdb03b.js"></script>
</head>

<body>

  <h1 id="header"><a href="./home.html">text</a></h1>
  <div class="nav-bar">
    <ul>
      <li><a href="./contact.html">Contact</a></li>
      <li><a href="./short-film.html">Work</a></li>
      <li><a href="./about.html">About</a></li>
    </ul>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <p class="quote">"text<br/> text text"</p>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

  <div class="about-bg">
    <div class="about">

      <p class="about">text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text.</p>
      <div class="profile"><img src="http://www.jacquelynclark.com/wp-content/uploads/2017/02/LargeScaleFloralArtandModernLamp-StudioMcGee.jpg"></div>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>

    </div>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

</body>

</html>

＆＃13;

请帮忙。谢谢！

Answer 1

通过删除`<br>`标签并使用CSS样式来创建间距，从而使代码稳定。

查看您的代码，我发现您正在使用许多<br>标签在某些元素之间创建垂直空间。这不是一个好习惯。

相反，您应该在<div>元素上添加填充，或在<p>元素上添加边距来创建这些分隔。通过删除<br>标签，可以使html易于阅读，并且可以更轻松地预测浏览器将如何处理其他元素。

对于响应式设计，请尝试使用新的网格布局进行媒体查询

如果您想创建响应式设计，建议您检查一下new grid layout system和media queries。

在调整浏览器大小时将响应图像锁定在同一位置

1 个答案:

通过删除`<br>`标签并使用CSS样式来创建间距，从而使代码稳定。

对于响应式设计，请尝试使用新的网格布局进行媒体查询

在调整浏览器大小时将响应图像锁定在同一位置

1 个答案:

通过删除<br>标签并使用CSS样式来创建间距，从而使代码稳定。

对于响应式设计，请尝试使用新的网格布局进行媒体查询

通过删除`<br>`标签并使用CSS样式来创建间距，从而使代码稳定。