Question

我是html和css的初学者，我正在尝试定位这个运球中显示的图像（https://dribbble.com/shots/2314157-Daily-UI-Day-1/attachments/439137）。我可以使用一些帮助，因为我不知道该怎么做。这是我的代码。

.html文件

1 collection)
   at System.Linq.Enumerable.ToList[TSource](IEnumerable

和.css文件

  <div class="container">
    <section>
      <p class="caption">Lorem Ipsum</p>
      <h1>Become a member</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam/</p>
      <button>Sign Up with Google+</button>
      <button>Sign Up with Facebook</button>
      <button>Sign Up with Twitter</button>
      <hr>
      <a href="#">Use your email</a>
    </section>
    <aside>
      <img src='http://i.imgur.com/MvG7aI0.jpg'>
    </aside>
  </div>

提前致谢！

Answer 1

使该部分向左浮动并向右浮动。但是你真的不需要它，只需将图像放在那里。

你应该指定该部分的宽度，所以不要在该部分之下。以百分比指定。

section {
  float: left;
}

aside {
  float: left;
}

除了添加高度100％和宽度自动以保持图像大小。并且将位置固定，这样就不会滚动和向右：0因此它将移动到页面的右侧。

aside {
    width: auto;
    height: 100%;
    position: relative;
    right: 0;
}

这是jsfiddle文件：https://jsfiddle.net/hmfc697r/

如何正确定位图像？

1 个答案: