Question

具体问题是我想在服务器上有一个页面结构很好的页面，但我不能把它变成所需的形状，但只能通过jquery手机屏幕分辨率设置它们的绝对位置。页面加载引导后，我的元素将以绝对路径向上移动。所有这些元素都在页面底部。我知道它是bootstrap，因为当我不添加bootstrap服务器链接时，就我的元素的位置而言，一切都很好。但自然我需要在那里引导。

我试图在很多方面解决这个问题，但最后我尝试用jquery等待页面加载，然后尝试设置位置。但是，毕竟移动到页面加载后调用的函数之后，bootstrap会在最后一次开始执行它的工作并且不知道如何以及为什么，但是它会修剪我的元素并将所有的圈子全部推到高位不好的位置

$(document).ready(function () {
  
// script for setting bubble circles in right place on whatever screen
// this is updated question for correct answer below, id=allCircles is id of global div for circles
$width = $('#allCircles').width();
$circleWidth = parseInt($('.circle').css('width'),10);
$circlesDistance = 60;
$leftCircles = ($width)/2 -(($circlesDistance/2)+$circleWidth);
$rightCircles = ($width)/2 + ($circlesDistance/2);

$('.left-circle').css('left', $leftCircles+'px' );
$('.right-circle').css('left', $rightCircles +'px');

$actPosition = $("#leftDownCircle").position();
$heightMargin= $actPosition.top + $circleWidth/2;

$('#leftDownCircle').css('top', $heightMargin+'px' );
$('#rightDownCircle').css('top', $heightMargin+'px' );

$leftMargin = ($width)/2 - ($circleWidth/2);
$heightMargin = ($heightMargin) -($circleWidth/2)-($circleWidth/4);

$('#middleCircle').css('position','absolute');
$('#middleCircle').css('left', $leftMargin +'px' );
$('#middleCircle').css('top', $heightMargin +'px' );

});

* {margin:0;}
.circle {
  width: 100px;
  height: 100px;
  background: lightgrey;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.left-circle {
    position: absolute; left: 15%;
}
.right-circle {
    position: absolute; left: 60%;
}

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



</head>


<body>


<div class="left-circle">
  <div class="circle">
    <h1>9</h1>
    <p>Level</p>
  </div>
</div>
<div class="right-circle">
  <div class="circle">
    <h1>9</h1>
    <p>Level</p>
  </div>
</div>


<div id="middleCircle">
  <div class="circle">
    <h1>9</h1>
    <p>Level</p>
  </div>
</div>


<div class="left-circle" id="leftDownCircle">
  <div class="circle">
    <h1>9</h1>
    <p>Level</p>
  </div>
</div>
<div class="right-circle" id="rightDownCircle">
  <div class="circle" >
    <h1>9</h1>
    <p>Level</p>
  </div>
</div>


</body>

</html>

当我将此代码添加到html标题时：

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

然后在电话上会产生这样的结果：

有人可以帮我解答如何以编程方式正确完成此操作吗？（也许为什么这不起作用或者什么是更好的做法来制作所需的结果，如在片段中，提前感谢任何帮助和你的时间！）

现在具体的网站上有代码。 Web模拟器看起来：

http://mobiletest.me/htc_one_emulator/?u=https://stackoverflowtest.000webhostapp.com/

使用移动设备测试的具体网站：

https://stackoverflowtest.000webhostapp.com/

注意左下等待bootstrap和重新加载后：

Answer 1

您遇到的基本问题是，通过使元素成为绝对元素，它们相对于最近的非静态父元素定位。我在网页上看不到任何非静态父元素，因此在您的情况下，它们将相对于body进行定位。这会导致一个问题，因为你有许多其他元素可能是不同的大小（例如，因为文本环绕移动屏幕上的多行，只需要在桌面大小上占一行），然后才能到达圆圈，从而确定正确的{{ 1}}与top相关的值是不可能的。

请注意，您的两个圈子没有设置body值，因此它们会被放置在默认静态位置，这就是您获得重叠的原因。

要修复它，您需要在绝对元素周围放置一个非静态元素（例如，通过赋予它top样式）。位置position:relative和top会将圆圈与该元素相关联，并为该元素指定一个高度，以便为圆圈提供足够的空间。

e.g。

left

这里要注意的关键事项是：

我已将所有圈子放入包含<div style="min-height: 550px;position:relative;"> <div class="left-circle" style="left: 30px;"> <div class="circle"> <h2>345</h2> <p>Bodov</p> </div> </div> <div class="right-circle" style="left: 190px;"> <div class="circle"> <h2>11</h2> <p>Best of</p> </div> </div> <div id="middleCircle" style="position: absolute; left: 110px; top: 100px;"> <div class="circle"> <h1>9</h1> <p>Uroven</p> </div> </div> <div class="left-circle" id="leftDownCircle" style="left: 30px; top: 198px;"> <div class="circle"> <h2>1622</h2> <p>Zaradenych knih</p> </div> </div> <div class="right-circle" id="rightDownCircle" style="left: 190px; top: 198px;"> <div class="circle"> <h2>124</h2> <p>Citatelov</p> </div> </div> </div>和position:relative
我更改了圆圈的顶部值，使自己相对于这个新的父div进行定位。

页面加载引导程序后，始终更改具有电话

1 个答案: