html - 文本变化时如何保持图像的位置?
问题描述
试图在不改变位置的情况下定位我的图像。当风文本关闭时(js在codepen btw中不起作用。)即在温度下不显示,天气图像正在向上移动。我试图定位这个“绝对”但没有帮助。我正在使用 reactjs 在右侧显示 Widget:
<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}°</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 文本/其他内容被删除/更改时,如何将图像保持在适当位置?
解决方案
您可以使用 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>
推荐阅读
- vue.js - vue-cli 构建一个 lib SSR - CSS 问题
- linux - gdb 不能为 arm-linux 交叉编译
- python - IDLE 告诉我 continue 函数不在循环中
- python - 在 nparray 中找到最大的 K(值和参数)
- ruby - 如何使用 Ruby 解码这个 EDID 字符串?
- ionic-framework - 使用href并切换回应用程序的离子4丢失会话
- reactjs - 如何在 Azure 应用服务中部署 SSR React 应用?
- java - 如何在 Spring Boot(Tomcat)中抑制/添加访问日志的条件
- java - net.serenitybdd.core.exceptions.SerenityManagedException:SERENITY_DISABLE_REST_CALLS_AFTER_FAILURES
- matlab - 在 Matlab 中用小数秒将纪元转换为日期