Question

我有这个网站：

http://www.invata.dac-proiect.ro/invat/pagina2.html

看看Firefox浏览器页面的样子......在Chrome上就可以了。

http://i59.tinypic.com/2qkm981.jpg

代码HTML：

<div class="container-home" style="width: 1200px;height: 929px;background: url(DECUPATE/TEST/BACKGROUND.png);margin: 0 auto;background-size: contain;position:relative;">
      <div class="maimuta"><img src="DECUPATE/TEST/images/MAIMUTA.png" alt="Mountain View"></div>
      <div class="capitol"><p>Capitol:CAP.1 NUMERELE NATURALE DE LA 0 la 1.000</p></div>


<div class="problema">
   <p class="problema" style="
    float: left;
">Care din urmatoarele numere este mai mare: <br>307 100, 10 000, 51 000.<br>
<input style="margin-top:16px;" placeholder="Aici poti scrie rezultatul... " type="text" name="quantity" id="quantity">&nbsp;<span id="errmsg"></span>
</p>
  <img style="width:500px;" src="http://invata.dac-proiect.ro/imagini/1.png">




  <textarea placeholder="Aici poti scrie rezolvarea... " rows="4" cols="50" style="width: 340px; 
    margin: -227px 0px 0px 84px; height: 150px;"></textarea>
<a href="#"><p style="margin-left: 296px;margin-top: -73px;font-size: 13px;color:white;">Apeleaza indicatii</p></a>
  <a href="pagina3.html"><div class="intrebare"></div></a>


  <ul>
<li><img src="DECUPATE/TEST/images/BILA.png" style="width:35px;height:35px;"></li>
<li><img src="DECUPATE/TEST/images/BILA-ALBA.png" style="width:35px;height:35px;"></li>
<li><img src="DECUPATE/TEST/images/BILA-ALBA.png" style="width:35px;height:35px;"></li>
<li><img src="DECUPATE/TEST/images/BILA-ALBA.png" style="width:35px;height:35px;"></li>
<li><img src="DECUPATE/TEST/images/BILA-ALBA.png" style="width:35px;height:35px;"></li>
</ul> 


</div>

</div>

我该如何解决这个问题？

提前致谢！

Answer 1

你没有格栅系统。你需要努力。

你应该有两个列：

右侧带图纸
左侧有文字和表格。

所以，这样做：

<div class="column-left">
  <p class="problema" style="
    float: left;
">Care din urmatoarele numere este mai mare: <br>307 100, 10 000, 51 000.   

  <br>
  <input style="margin-top:16px;" placeholder="Aici poti scrie rezultatul... " type="text" name="quantity" id="quantity">&nbsp;<span id="errmsg"></span>
  </p>
  <textarea placeholder="Aici poti scrie rezolvarea... " rows="4" cols="50" style="width: 340px; 
    margin: -227px 0px 0px 84px; height: 150px;"></textarea>
  <a href="#"><p style="margin-left: 296px;margin-top: -73px;font-size: 13px;color:white;">Apeleaza indicatii</p></a>
  <a href="pagina3.html"><div class="intrebare"></div></a>
</div>

<div class="column-right">
  <img style="width:500px;" src="http://invata.dac-proiect.ro/imagini/1.png">
</div>

然后在你的CSS中你这样做：

.column-left, column-right {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}

应该做的伎俩。然后你可以自定义你的CSS并改进它以在它们之间有一些边距/填充。

Answer 2

也将textarea提供给doSomething()。

如何为firefox修复此站点？

2 个答案: