[英]How do I change my css so my different divs do not overlap when having different resolution?
The problem is that my divs are shown correctly as long as my browser is in full screen, but when I scale down the resolution the divs overlap, how do I get a relative positioning to each other问题是只要我的浏览器处于全屏状态,我的 div 就会正确显示,但是当我缩小 div 重叠的分辨率时,我如何获得彼此的相对定位
#curve_temp {
position: absolute;
top: 300px;
left: 30px;
margin-right: 100px;
}
#curve_vibr {
position: absolute;
top: 300px;
right: 220px;
}
#curve_laut {
position: absolute;
top: 600px;
left: 30px;
padding-right: 100px;
}
#curve_rpm {
position: absolute;
top: 600px;
right: 220px;
}
#curve_quali {
position: absolute;
top: 900px;
left: 30px;
padding-right: 100px;
}
<div class="user-dashboard">
<h1>Hallo, User!</h1>
<div id="logo_eg">
<center><img src="logo.png" alt="engineguru_logo" class="our_logo" width="476" height="191"></center></div>
<div id="curve_quali" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_rpm" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_laut" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_temp" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_vibr" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="flaticon"><a href="https://www.flaticon.com/free-icons/home" title="home icons">Home icons created by Freepik - Flaticon</a></div>
</div>
This might do the trick.这可能会奏效。 I would use media queries to set the desired screen size breakpoints.
我会使用媒体查询来设置所需的屏幕大小断点。 Additionally, it may help to use
rem or em
instead of px
as those help with responsive design in screen size scaling.此外,使用
rem or em
代替px
可能会有所帮助,因为它们有助于在屏幕尺寸缩放中进行响应式设计。
You could set the css styles to be between two widths, for example with a tablet:您可以将 css 样式设置在两个宽度之间,例如使用平板电脑:
@media (min-width: 475px) and (max-width: 768px)
{
/* Insert screen size styles for these breakpoints here. */
}
Or use settings that specify styles upto a specific screen size dimension:或者使用将样式指定到特定屏幕尺寸尺寸的设置:
@media only screen and (max-width: 320px)
/* For mobile phones: */
{
/* Insert screen size styles for these breakpoints here. */
}
With your code shared above, it could look something like this:使用上面共享的代码,它可能看起来像这样:
@media only screen and (max-width: 320px){
/* For mobile phones: */
/* Adjust values to the appropriate px dimension. */
#curve_temp {
position: absolute;
top: 300px;
left: 30px;
margin-right: 100px;
}
}
@media only screen and (max-width: 768px){
/* For tablet screens: */
/* Adjust values to the appropriate px dimension. */
#curve_temp {
position: absolute;
top: 300px;
left: 30px;
margin-right: 100px;
}
}
@media only screen and (max-width: 1920px){
/* For desktop screen: */
/* Adjust values to the appropriate px dimension. */
#curve_temp {
position: absolute;
top: 300px;
left: 30px;
margin-right: 100px;
}
}
Firstly, using absolute positioning is far more rigid and makes it difficult to write layouts that respond well to changing content.首先,使用绝对定位要严格得多,并且很难编写能够很好地响应不断变化的内容的布局。 more infos here
更多信息在这里
You can use flexbox, put the divs you want to respond correctly in a flex-container as follows.您可以使用 flexbox,将您想要正确响应的 div 放入 flex-container 中,如下所示。
html: html:
<div class="flex-container">
/*put your divs here*/
</div>
css: CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
}
You can get the design you want with these flexbox properties in addition to spacing manipulation.除了间距操作之外,您还可以使用这些 flexbox 属性获得所需的设计。
A better way to give multiple divs the same style is giving them the same class and styling it with css.为多个 div 赋予相同样式的更好方法是赋予它们相同的类并使用 css 对其进行样式设置。
Your old code:你的旧代码:
<div id="curve_quali" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_rpm" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_laut" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_temp" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_vibr" style="width: 535px; height: 268px; vertical-align: right" ></div>
better way to code:更好的编码方式:
<div id="curve_quali" class="class_name" ></div>
<div id="curve_rpm" class="class_name"</div>
<div id="curve_laut" class="class_name"</div>
<div id="curve_temp" class="class_name"</div>
<div id="curve_vibr" class="class_name"</div>
you rewrite the same style you gave in your style attribute as follows:您重写您在样式属性中提供的相同样式,如下所示:
.class_name {
/* your styling over here */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.