Question

我想将svg放在屏幕上的相同位置，而不管屏幕大小如何。我希望将svg放在相同的div中，意思是“请重试”文本的最右边。 svg下面的代码也出现在文本Debug的右侧，并且在大屏幕上可以对齐，但是在小屏幕上，它会显示在url上。我该如何解决？有人可以帮助我吗？谢谢。

下面是代码，

<div className="wrapper">
    <div className="message">
        <svg className="message_close error"></svg>
        <div>
            <div> Please try again 
                <div >Server </div>
            </div>
            <div>
                 <div>
                     <h2>Debug</h2>
                     URL: {request.responseURL}
                 </div>
            </div>
        </div>
    </div>
</div>

.wrapper {
    width: calc(100% - 450px);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 100px;
    left: 250px;
    margin: 0 auto;
}

.message {
cursor: pointer;
background-color: white;
color: $topcon_blue;
display: flex;
justify-content: center;
align-items: center;
padding: 18px;
font-weight: normal;
position: relative;

.message_close{
    position: absolute;
    left:calc(100% - 80px);

    &.error{
        top: 105px;
    }
}}

Answer 1

像这样更改.message_close和.error css。我测试过了。

.wrapper {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 100px;
  left: 250px;
  margin: 0 auto;
}

.message {
  cursor: pointer;
  background-color: white;
  color: $topcon_blue;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
  font-weight: normal;
  position: relative;
}

.message_close {
  position: absolute;
  width: 50px;
  height: 50px;
}

.message_close.error {
  top: 0;
  right: 0;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <div class="wrapper">
    <div class="message">
      <svg class="message_close error"></svg>
      <div>
        <div> Please try again
          <div>Server </div>
        </div>
        <div>
          <div>
            <h2>Debug</h2>
            URL: {request.responseURL}
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

无论使用css屏幕大小如何如何将图标放置在同一位置？

1 个答案: