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

Question

尝试在不改变位置的情况下定位我的图像。当风文本关闭时(顺便说一句，js 在 codepen 中不工作。)即不显示在温度下，天气图像向上移动。我试图定位这个“绝对”但没有帮助。 我正在使用 reactjs 在右侧显示小部件:

 <div className="widget">
                <div className="row">
                    <div className="col-lg-12 title">{title}</div>
                </div>

                <div className="row widgettop">
                    <div className="col-lg-6 topicon">
                        <img src={'http://openweathermap.org/img/w/' + icon + '.png'}></img>
                    </div>
                    <div className="col-lg-6 topdegrees">
                        {location}
                        <div className='degrees'>{degrees}&deg;</div>
                        {wind && <div>Wind{' '}<span className='wind'>{speed}</span> {unitsType === 'metric' ? <span>km/h</span> : <span>mph</span>}</div>}
                    </div>
                </div>
 </div>

我根据 state.wind 是否显示风的详细信息。 当 Wind 文本/其他内容被删除/更改时，如何使图像保持原位？

codepen here

Answer 1

您可以使用 JS 切换风区的可见性属性。当我添加 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>