Question

我试图将绝对位置设置为20 div左右但是它们都显示出高于其他位置的位置！

HTML：

    <body>

<div class="box" style="width : 2000px; height : 2000px">

<div style="position:absolute; top=705px; left=200px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=325px; left=560px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=1085px; left=560px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=135px; left=920px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=515px; left=920px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=895px; left=920px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=1275px; left=920px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=40px; left=1280px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=230px; left=1280px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=420px; left=1280px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=610px; left=1280px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=800px; left=1280px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=990px; left=1280px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=1180px; left=1280px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=1370px; left=1280px; width=300px; height=150px;" class="femme">coucou</div>
</div>

</body>

CSS：

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Source Sans Pro', sans-serif;
    background: #F0F0F0;
}

.box {
    position: relative;
}

.homme {
    background: #E0E4EE;
    border-radius: 0px 10px 0px 10px;
}

.femme {
    background: #EBDCE2;
    border-radius: 0px 10px 0px 10px;
}

这是jsfiddle：https://jsfiddle.net/wp3peqdp/

有人可以帮助我吗？

Answer 1

内联样式与普通CSS一样，您不必在CSS中使用=设置属性。

Answer 2

你有等号而不是冒号。修复了你的问题：

body {
  -webkit-font-smoothing: antialiased;
  font-family: 'Source Sans Pro', sans-serif;
  background: #F0F0F0;
}
.box {
  position: relative;
}
.homme {
  background: #E0E4EE;
  border-radius: 0px 10px 0px 10px;
}
.femme {
  background: #EBDCE2;
  border-radius: 0px 10px 0px 10px;
}

<body>

  <div class="box" style="width : 2000px; height : 2000px">

    <div style="position:absolute; top:705px; left:200px; width:300px; height:150px;" class="homme">coucou</div>
    <div style="position:absolute; top:325px; left:560px; width:300px; height:150px;" class="homme">coucou</div>
    <div style="position:absolute; top:1085px; left:560px; width:300px; height:150px;" class="femme">coucou</div>
    <div style="position:absolute; top:135px; left:920px; width:300px; height:150px;" class="homme">coucou</div>
    <div style="position:absolute; top:515px; left:920px; width:300px; height:150px;" class="femme">coucou</div>
    <div style="position:absolute; top:895px; left:920px; width:300px; height:150px;" class="homme">coucou</div>
    <div style="position:absolute; top:1275px; left:920px; width:300px; height:150px;" class="femme">coucou</div>
    <div style="position:absolute; top:40px; left:1280px; width:300px; height:150px;" class="homme">coucou</div>
    <div style="position:absolute; top:230px; left:1280px; width:300px; height:150px;" class="femme">coucou</div>
    <div style="position:absolute; top:420px; left:1280px; width:300px; height:150px;" class="homme">coucou</div>
    <div style="position:absolute; top:610px; left:1280px; width:300px; height:150px;" class="femme">coucou</div>
    <div style="position:absolute; top:800px; left:1280px; width:300px; height:150px;" class="homme">coucou</div>
    <div style="position:absolute; top:990px; left:1280px; width:300px; height:150px;" class="femme">coucou</div>
    <div style="position:absolute; top:1180px; left:1280px; width:300px; height:150px;" class="homme">coucou</div>
    <div style="position:absolute; top:1370px; left:1280px; width:300px; height:150px;" class="femme">coucou</div>
  </div>

</body>

我对位置做错了：绝对

2 个答案: