Question

尝试在不更改位置的情况下定位我的图像。当关闭风文本（js在codepen btw中不起作用），即在温度下未显示时，天气图像向上移动。我试图将这个“绝对”定位，但没有帮助。我正在使用reactjs在右侧显示小部件：

foo(exc: exception) =
    ...

基于state.wind我是否显示风的详细信息。删除/更改Wind文字/其他内容时如何将图像固定在适当的位置？

codepen here

Answer 1

您可以使用JS 切换 风向区域的visibility属性。当我添加visibility: hidden并说#windArea时，图片就保留了位置-您可以在visible和hidden之间切换：

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-family: Lucida Grande;
}

input,
label {
  display: block;
}

#tempArea input,
#tempArea label {
  display: inline;
  margin-bottom: 10px;
}

#windArea input,
#windArea label {
  display: inline;
  margin-bottom: 10px;
}

div#main {
  background: #F2F2F2;
  padding: 1vw 2vw;
  width: 48%;
}

.spaceradio {
  margin-right: 10px;
}

img {
  width: 84% !important;
  height: 100% !important;
  margin-left: 20%;
  position: relative;
}

.divider {
  border-left: 1px solid lightgrey;
}

.widget {
  box-shadow: 1px 2px 1px lightgray;
  background-color: white;
  margin-left: 10px;
  height: 100%;
  width: 90%;
  position: absolute;
}

.title {
  margin-left: 30px;
  padding: 10px;
  position: absolute;
}

.left {
  margin-left: 20px;
  padding: 10px;
  vertical-align: top;
}

.text {
  height: 40px;
  width: 100%;
}

.top {
  margin-top: 15px;
}

.widgettop {
  margin-top: 15px;
}

.topdegrees {
  margin-top: 40px;
}

.topicon {
  margin-top: 20px;
}

.degrees {
  font-size: xx-large;
  font-weight: bold;
}

.wind {
  font-size: small;
  font-weight: bold;
}

.hline {
  border-top: 4px solid blue;
  padding: 0 !important;
  margin-bottom: 10px;
  width: 48%;
}


/* .abs
{
  position: absolute;
} */

#windArea { /* ADDED */
  visibility: hidden;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="left">
  <hr class="container hline">
  <div id="main" class="container border">
    <div class="row">
      <div class="col-lg-6 top"><label for="title">Title</label><input id="title" type="text" placeholder=" Title of widget" name="title" class="text" value="">
        <div class="top"><label for="radio">Temperature</label>
          <div id="tempArea" class="row"><span class="col-lg-6"><input type="radio" id="one" class="spaceradio" value="metric" checked=""><label for="one">℃</label></span><span class="col-lg-6"><input type="radio" id="two" class="spaceradio" value="imperial"><label for="two">℉</label></span></div>
        </div>
        <div class="top"><label for="radio">Wind</label>
          <div id="windArea" class="row"><span class="col-lg-6"><input type="radio" id="one" class="spaceradio" value="true"><label for="one">On</label></span><span class="col-lg-6"><input type="radio" id="two" class="spaceradio" value="false" checked=""><label for="two">Off</label></span></div>
        </div>
      </div>
      <div class="col-lg-6 divider top">
        <div class="widget">
          <div class="row">
            <div class="col-lg-12 title">FDSFSDFDSFDSFDS</div>
          </div>
          <div class="row widgettop">
            <div class="col-lg-6 topicon"><img src="http://openweathermap.org/img/w/09d.png"></div>
            <div class="col-lg-6 topdegrees abs">Paramatta
              <div class="degrees">58.12°</div>
              <div>Wind <span class="wind">23.04</span> <span>mph</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

文本更改时如何保持图像的位置？

1 个答案: