如何定位图像？

时间：2016-11-26 12:50:24

标签： javascript html css position html-table 

#board{
    width: 94%;
    height: 94%;
    border: .4rem solid #000;
    margin: auto;
    margin-top: 1.7%;
    background-color: green;
    border: .4rem solid #000;
    margin: auto;
    margin-top: 1.7%;
    background-color: green;
    position: relative;
}

tr{
    width:100%;
    height: 10%;
    float: left;
    padding: 0 ! important;
    vertical-align: middle;
}
.col{
    padding: 0 ! important;
    width: 10%;
    height: 100%;
    float: left;
    z-index: 890;
}
.odd{
    background-color: green;
}
.even{
    background-color: #fff;
}
/*#rw-one,#rw-three,#rw-five,#rw-seven,#rw-nine{
    /*width: 100%;
    height: 100%;*//*
    z-index: 999;
    background-color: red;
}*/
table{
    border-spacing: 0;
    width:100%;
    height: 100%;
    background-color: orange;
    text-align:center;
}

.nmbr{
    font-size: 1rem;
    font-weight: 100;
    text-shadow: 1px 1px 7px yellow;
    margin-top: 26% ! important;
    float: left;
    margin-left: 34%;
    font-family: fantasy;
}
td,tr{
    border-spacing: 0;
}

#rw-ten .nmbr{
  margin-left: 37%;
}

.lddr,.snk{
    /*position:fixed;*/
    z-index: 990;
    float: left;
    position: absolute;
}
#lddr1{
    width: 3%;
    height: 39%;
    transform: rotate(42deg);
    margin-top: calc(2% + 308px);
    margin-left: calc(2% + 57px);
}
<div id="board">
                        <table>
                            <tr id="rw-one">
                                <td class="odd col"><span class="nmbr">100</span> </td>
                                <td class="even col"><span class="nmbr">99</span> </td>
                                <td class="odd col"><span class="nmbr">98</span> </td>
                                <td class="even col"><span class="nmbr">97</span> </td>
                                <td class="odd col"><span class="nmbr">96</span> </td>
                                <td class="even col"> <span class="nmbr">95</span></td>
                                <td class="odd col"><span class="nmbr">94</span> </td>
                                <td class="even col"><span class="nmbr">93</span> </td>
                                <td class="odd col"><span class="nmbr">92</span> </td>
                                <td class="even col"> <span class="nmbr">91</span></td>
                            </tr>
                            <tr id="rw-two">
                                <td class="even col"><span class="nmbr">81</span> </td>
                                <td class="odd col"><span class="nmbr">82</span> </td>
                                <td class="even col"><span class="nmbr">83</span> </td>
                                <td class="odd col"><span class="nmbr">84</span> </td>
                                <td class="even col"><span class="nmbr">85</span> </td>
                                <td class="odd col"><span class="nmbr">86</span> </td>
                                <td class="even col"><span class="nmbr">87</span> </td>
                                <td class="odd col"><span class="nmbr">88</span> </td>
                                <td class="even col"><span class="nmbr">89</span> </td>
                                <td class="odd col"><span class="nmbr">90</span> </td>
                            </tr>
                            <tr id="rw-three">
                                <td class="odd col"><span class="nmbr">80</span> </td>
                                <td class="even col"> <span class="nmbr">79</span></td>
                                <td class="odd col"><span class="nmbr">78</span> </td>
                                <td class="even col"><span class="nmbr">77</span> </td>
                                <td class="odd col"><span class="nmbr">76</span> </td>
                                <td class="even col"> <span class="nmbr">75</span></td>
                                <td class="odd col"><span class="nmbr">74</span> </td>
                                <td class="even col"><span class="nmbr">73</span> </td>
                                <td class="odd col"><span class="nmbr">72</span> </td>
                                <td class="even col"><span class="nmbr">71</span> </td>
                            </tr>
                            <tr id="rw-four">
                                <td class="even col"> <span class="nmbr">61</span></td>
                                <td class="odd col"><span class="nmbr">62</span> </td>
                                <td class="even col"><span class="nmbr">63</span> </td>
                                <td class="odd col"><span class="nmbr">64</span> </td>
                                <td class="even col"><span class="nmbr">65</span> </td>
                                <td class="odd col"><span class="nmbr">66</span> </td>
                                <td class="even col"><span class="nmbr">67</span> </td>
                                <td class="odd col"><span class="nmbr">68</span> </td>
                                <td class="even col"><span class="nmbr">69</span> </td>
                                <td class="odd col"><span class="nmbr">70</span> </td>
                            </tr>
                            <tr id="rw-five">
                                <td class="odd col"><span class="nmbr">60</span> </td>
                                <td class="even col"><span class="nmbr">59</span> </td>
                                <td class="odd col"><span class="nmbr">58</span> </td>
                                <td class="even col"><span class="nmbr">57</span> </td>
                                <td class="odd col"> <span class="nmbr">56</span></td>
                                <td class="even col"><span class="nmbr">55</span> </td>
                                <td class="odd col"><span class="nmbr">54</span> </td>
                                <td class="even col"><span class="nmbr">53</span> </td>
                                <td class="odd col"><span class="nmbr">52</span> </td>
                                <td class="even col"> <span class="nmbr">51</span></td>
                            </tr>
                            <tr id="rw-six">
                                <td class="even col"><span class="nmbr">41</span> </td>
                                <td class="odd col"><span class="nmbr">42</span> </td>
                                <td class="even col"> <span class="nmbr">43</span></td>
                                <td class="odd col"><span class="nmbr">44</span> </td>
                                <td class="even col"> <span class="nmbr">45</span></td>
                                <td class="odd col"><span class="nmbr">46</span> </td>
                                <td class="even col"><span class="nmbr">47</span> </td>
                                <td class="odd col"> <span class="nmbr">48</span></td>
                                <td class="even col"><span class="nmbr">49</span> </td>
                                <td class="odd col"> <span class="nmbr">50</span></td>
                            </tr>
                            <tr id="rw-seven">
                                <td class="odd col"><span class="nmbr">40</span> </td>
                                <td class="even col"><span class="nmbr">39</span> </td>
                                <td class="odd col"><span class="nmbr">38</span> </td>
                                <td class="even col"> <span class="nmbr">37</span></td>
                                <td class="odd col"> <span class="nmbr">36</span></td>
                                <td class="even col"><span class="nmbr">35</span> </td>
                                <td class="odd col"><span class="nmbr">34</span> </td>
                                <td class="even col"><span class="nmbr">33</span> </td>
                                <td class="odd col"><span class="nmbr">32</span> </td>
                                <td class="even col"><span class="nmbr">31</span> </td>
                            </tr>
                            <tr id="rw-eight">
                                <td class="even col"><span class="nmbr">21</span> </td>
                                <td class="odd col"><span class="nmbr">22</span> </td>
                                <td class="even col"><span class="nmbr">23</span> </td>
                                <td class="odd col"><span class="nmbr">24</span> </td>
                                <td class="even col"><span class="nmbr">25</span> </td>
                                <td class="odd col"> <span class="nmbr">26</span></td>
                                <td class="even col"><span class="nmbr">27</span> </td>
                                <td class="odd col"> <span class="nmbr">28</span></td>
                                <td class="even col"><span class="nmbr">29</span> </td>
                                <td class="odd col"><span class="nmbr">30</span> </td>
                            </tr>
                            <tr id="rw-nine">
                                <td class="odd col"><span class="nmbr">20</span> </td>
                                <td class="even col"><span class="nmbr">19</span> </td>
                                <td class="odd col"><span class="nmbr">18</span> </td>
                                <td class="even col"><span class="nmbr">17</span> </td>
                                <td class="odd col"><span class="nmbr">16</span> </td>
                                <td class="even col"><span class="nmbr">15</span> </td>
                                <td class="odd col"><span class="nmbr">14</span> </td>
                                <td class="even col"><span class="nmbr">13</span> </td>
                                <td class="odd col"> <span class="nmbr">12</span></td>
                                <td class="even col"><span class="nmbr">11</span> </td>
                            </tr>
                            <tr id="rw-ten">
                                <td class="even col"><span class="nmbr">1</span></td>
                                <td class="odd col"><span class="nmbr">2</span> </td>
                                <td class="even col"><span class="nmbr">3</span></td>
                                <td class="odd col"> <span class="nmbr">4</span></td>
                                <td class="even col"><span class="nmbr">5</span> </td>
                                <td class="odd col"><span class="nmbr">6</span></td>
                                <td class="even col"><span class="nmbr">7</span> </td>
                                <td class="odd col"><span class="nmbr">8</span> </td>
                                <td class="even col"><span class="nmbr">9</span> </td>
                                <td class="odd col"><span class="nmbr">10</span></td>
                            </tr>
                            <section id="laddr-container">
                                <img src=" https://i.stack.imgur.com/uFLzI.png" class="lddr" id="lddr1">
                            </section>
                        </table>
  </div>

在上面的代码中，我正在尝试创建一个蛇形和梯形板。我需要从1到38修复梯子。我试图通过设置梯子的不同位置属性来实现它，但这对我没有帮助，这根据屏幕变化而变化。是否有人能够帮助我在所有窗户中从1到38修复此梯子？

3 个答案:

答案 0 :(得分：1)

您必须为每个小方框设置id，以获得1 set id ='b1'和38 id ='b38'的exaple。然后使用jquery将梯形样式设置为这个框：

var topOfb1=$('#b1').offset().top;
$(#laddr1).css('bottom', topOfb1);
var rightOfb1=$('#b1').offset().left+$('#b1').width();
$(#laddr1).css('left', rightOfb1');

并在38的左下角执行此操作以设置梯子的顶部和右侧。

您可以计算1到38之间的距离并设置梯子的宽度和高度

答案 1 :(得分：1)

您可以在背景中使用图像，并在调整大小时更新旋转和顶部值。

表格中的任何html都不是表格元素，只能是单元格或标题的子项

下面的简单示例

＆＃13;
＆＃13; 
// this average and might not be the wisest way to sort it out :)
function rotateit() {
  var ladder = document.getElementById('laddr-container');
  var tbwth = document.getElementById('rw-one').offsetWidth;
  var tbht = document.getElementById('rw-one').offsetHeight;
  var rtladr = (tbwth / tbht);
  ladder.style.transform = 'rotate(' + rtladr * 1.35 + 'deg)';
  ladder.style.top = tbht + rtladr + 'px';
}

window.onresize = rotateit;
window.onload = rotateit
＆＃13; 
#board {
  width: 94%;
  height: 94%;
  border: .4rem solid #000;
  margin: auto;
  margin-top: 1.7%;
  background-color: green;
  border: .4rem solid #000;
  margin: auto;
  margin-top: 1.7%;
  background-color: green;
  position: relative;
}
tr {
  width: 100%;
  height: 10%;
  float: left;
  padding: 0 ! important;
  vertical-align: middle;
}
.col {
  padding: 0 ! important;
  width: 10%;
  height: 100%;
  float: left;
  z-index: 890;
}
.odd {
  background-color: green;
}
.even {
  background-color: #fff;
}
/*#rw-one,#rw-three,#rw-five,#rw-seven,#rw-nine{
    /*width: 100%;
    height: 100%;*/

/*
    z-index: 999;
    background-color: red;
}*/

table {
  border-spacing: 0;
  width: 100%;
  height: 100%;
  background-color: orange;
  text-align: center;
}
.nmbr {
  font-size: 1rem;
  font-weight: 100;
  text-shadow: 1px 1px 7px yellow;
  margin-top: 26% ! important;
  float: left;
  margin-left: 34%;
  font-family: fantasy;
}
td,
tr {
  border-spacing: 0;
}
#rw-ten .nmbr {
  margin-left: 37%;
}
#laddr-container {
  position: absolute;
  background: blue;
  bottom: 1em;
  left: 2.5%;
  top: 10%;
  transform: rotate(34deg);
  transform-origin: bottom left;
  background: url(https://i.stack.imgur.com/uFLzI.png);
  width: 5%;
  background-size: 100% auto;
}
table {
  position: relatve;
}
＆＃13; 
<div id="board">
  <table>

    <tr id="rw-one">
      <td class="odd col"><span class="nmbr">100</span> 
      </td>
      <td class="even col"><span class="nmbr">99</span> 
      </td>
      <td class="odd col"><span class="nmbr">98</span> 
      </td>
      <td class="even col"><span class="nmbr">97</span> 
      </td>
      <td class="odd col"><span class="nmbr">96</span> 
      </td>
      <td class="even col"> <span class="nmbr">95</span>
      </td>
      <td class="odd col"><span class="nmbr">94</span> 
      </td>
      <td class="even col"><span class="nmbr">93</span> 
      </td>
      <td class="odd col"><span class="nmbr">92</span> 
      </td>
      <td class="even col"> <span class="nmbr">91</span>
      </td>
    </tr>
    <tr id="rw-two">
      <td class="even col"><span class="nmbr">81</span> 
      </td>
      <td class="odd col"><span class="nmbr">82</span> 
      </td>
      <td class="even col"><span class="nmbr">83</span> 
      </td>
      <td class="odd col"><span class="nmbr">84</span> 
      </td>
      <td class="even col"><span class="nmbr">85</span> 
      </td>
      <td class="odd col"><span class="nmbr">86</span> 
      </td>
      <td class="even col"><span class="nmbr">87</span> 
      </td>
      <td class="odd col"><span class="nmbr">88</span> 
      </td>
      <td class="even col"><span class="nmbr">89</span> 
      </td>
      <td class="odd col"><span class="nmbr">90</span> 
      </td>
    </tr>
    <tr id="rw-three">
      <td class="odd col"><span class="nmbr">80</span> 
      </td>
      <td class="even col"> <span class="nmbr">79</span>
      </td>
      <td class="odd col"><span class="nmbr">78</span> 
      </td>
      <td class="even col"><span class="nmbr">77</span> 
      </td>
      <td class="odd col"><span class="nmbr">76</span> 
      </td>
      <td class="even col"> <span class="nmbr">75</span>
      </td>
      <td class="odd col"><span class="nmbr">74</span> 
      </td>
      <td class="even col"><span class="nmbr">73</span> 
      </td>
      <td class="odd col"><span class="nmbr">72</span> 
      </td>
      <td class="even col"><span class="nmbr">71</span> 
      </td>
    </tr>
    <tr id="rw-four">
      <td class="even col"> <span class="nmbr">61</span>
      </td>
      <td class="odd col"><span class="nmbr">62</span> 
      </td>
      <td class="even col"><span class="nmbr">63</span> 
      </td>
      <td class="odd col"><span class="nmbr">64</span> 
      </td>
      <td class="even col"><span class="nmbr">65</span> 
      </td>
      <td class="odd col"><span class="nmbr">66</span> 
      </td>
      <td class="even col"><span class="nmbr">67</span> 
      </td>
      <td class="odd col"><span class="nmbr">68</span> 
      </td>
      <td class="even col"><span class="nmbr">69</span> 
      </td>
      <td class="odd col"><span class="nmbr">70</span> 
      </td>
    </tr>
    <tr id="rw-five">
      <td class="odd col"><span class="nmbr">60</span> 
      </td>
      <td class="even col"><span class="nmbr">59</span> 
      </td>
      <td class="odd col"><span class="nmbr">58</span> 
      </td>
      <td class="even col"><span class="nmbr">57</span> 
      </td>
      <td class="odd col"> <span class="nmbr">56</span>
      </td>
      <td class="even col"><span class="nmbr">55</span> 
      </td>
      <td class="odd col"><span class="nmbr">54</span> 
      </td>
      <td class="even col"><span class="nmbr">53</span> 
      </td>
      <td class="odd col"><span class="nmbr">52</span> 
      </td>
      <td class="even col"> <span class="nmbr">51</span>
      </td>
    </tr>
    <tr id="rw-six">
      <td class="even col"><span class="nmbr">41</span> 
      </td>
      <td class="odd col"><span class="nmbr">42</span> 
      </td>
      <td class="even col"> <span class="nmbr">43</span>
      </td>
      <td class="odd col"><span class="nmbr">44</span> 
      </td>
      <td class="even col"> <span class="nmbr">45</span>
      </td>
      <td class="odd col"><span class="nmbr">46</span> 
      </td>
      <td class="even col"><span class="nmbr">47</span> 
      </td>
      <td class="odd col"> <span class="nmbr">48</span>
      </td>
      <td class="even col"><span class="nmbr">49</span> 
      </td>
      <td class="odd col"> <span class="nmbr">50</span>
      </td>
    </tr>
    <tr id="rw-seven">
      <td class="odd col"><span class="nmbr">40</span> 
      </td>
      <td class="even col"><span class="nmbr">39</span> 
      </td>
      <td class="odd col"><span class="nmbr">38</span> 
      </td>
      <td class="even col"> <span class="nmbr">37</span>
      </td>
      <td class="odd col"> <span class="nmbr">36</span>
      </td>
      <td class="even col"><span class="nmbr">35</span> 
      </td>
      <td class="odd col"><span class="nmbr">34</span> 
      </td>
      <td class="even col"><span class="nmbr">33</span> 
      </td>
      <td class="odd col"><span class="nmbr">32</span> 
      </td>
      <td class="even col"><span class="nmbr">31</span> 
      </td>
    </tr>
    <tr id="rw-eight">
      <td class="even col"><span class="nmbr">21</span> 
      </td>
      <td class="odd col"><span class="nmbr">22</span> 
      </td>
      <td class="even col"><span class="nmbr">23</span> 
      </td>
      <td class="odd col"><span class="nmbr">24</span> 
      </td>
      <td class="even col"><span class="nmbr">25</span> 
      </td>
      <td class="odd col"> <span class="nmbr">26</span>
      </td>
      <td class="even col"><span class="nmbr">27</span> 
      </td>
      <td class="odd col"> <span class="nmbr">28</span>
      </td>
      <td class="even col"><span class="nmbr">29</span> 
      </td>
      <td class="odd col"><span class="nmbr">30</span> 
      </td>
    </tr>
    <tr id="rw-nine">
      <td class="odd col"><span class="nmbr">20</span> 
      </td>
      <td class="even col"><span class="nmbr">19</span> 
      </td>
      <td class="odd col"><span class="nmbr">18</span> 
      </td>
      <td class="even col"><span class="nmbr">17</span> 
      </td>
      <td class="odd col"><span class="nmbr">16</span> 
      </td>
      <td class="even col"><span class="nmbr">15</span> 
      </td>
      <td class="odd col"><span class="nmbr">14</span> 
      </td>
      <td class="even col"><span class="nmbr">13</span> 
      </td>
      <td class="odd col"> <span class="nmbr">12</span>
      </td>
      <td class="even col"><span class="nmbr">11</span> 
      </td>
    </tr>
    <tr id="rw-ten">
      <td class="even col"><span class="nmbr">1</span>
      </td>
      <td class="odd col"><span class="nmbr">2</span> 
      </td>
      <td class="even col"><span class="nmbr">3</span>
      </td>
      <td class="odd col"> <span class="nmbr">4</span>
      </td>
      <td class="even col"><span class="nmbr">5</span> 
      </td>
      <td class="odd col"><span class="nmbr">6</span>
      </td>
      <td class="even col"><span class="nmbr">7</span> 
      </td>
      <td class="odd col"><span class="nmbr">8</span> 
      </td>
      <td class="even col"><span class="nmbr">9</span> 
      </td>
      <td class="odd col"><span class="nmbr">10</span>
        <section id="laddr-container">

        </section>
      </td>
    </tr>

  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以将图像定位absolute，然后调整[响应]距离和旋转。对我来说是

#lddr1{
    width: 3%;
    height: 39%;
    transform: rotate(45deg);
    position: absolute;
    left:13%;
    bottom: 1%;
}

请参阅JsFiddle。

相关问题
最新问题