CSS相对定位不适用于移动视图

时间:2018-06-16 17:02:22

标签: html css css-position

我是Coding&的新手。我有一个关于移动定位的问题。 我已经添加了CSS和Div并自行设置它正在使用PC View,但在移动视图中它移动到右侧。不是按照确切的速度。

DIV类

                                                       

高清矢量背景

                                          199                                                       载入中...                                                  

CSS

div.relative {
    position: relative;
    left: 850px;
    bottom: 270px;
    border: 3px solid #73AD21;
}

PC VIEW

移动视图

MOBILE VIEW

您的帮助将不胜感激

是否可以将上一个表行与第二个单表合并.. 没有CSS 第1代码11图像邮政编码 -

    <div class="panel-body">
<div class="col-md-12">               
<?php $the_query = new WP_Query( 'showposts=11&orderby=date&order=DESC' ); ?>

  <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>       
<div class="col-lg-3 col-md-3 col-sm-4 col-hs-6">
                <?php
                    /* Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'content', get_post_format() );
                ?>
</div>

<?php endwhile; ?>
</div> 
</div> 
</div>
</div>

第二张单张图像码:

高清矢量背景

199正在加载......

4 个答案:

答案 0 :(得分:2)

在CSS中,您应该使用百分比而不是像素来表示左侧和底部的值。它将以更好的方式呈现元素。但在你的情况下,我不认为这个位置是必需的。

答案 1 :(得分:0)

由于屏幕尺寸不同,因此您可以根据屏幕尺寸定位元素,因为您使用定位作为相对,这意味着元素将根据屏幕的大小进行调整。尝试使用其他定位方法,如果问题仍然存在,那么使用媒体查询使您的页面响应可能会对您有所帮助。

答案 2 :(得分:0)

你添加了&#34; div&#34;默认情况下,&#34; div&#34; tag是块级元素从新行开始尝试添加display:inline-block&#34;对你的CSS。或使用媒体查询。

答案 3 :(得分:0)

正如@Amhil Med所说,您可能会使用媒体查询。这意味着您可以链接到不同的移动视图样式表,并修复问题而不会在计算机上填充正常视图