你如何在html5中定位div？

-7

我已經好幾個小時試圖讓幾個div來正確顯示和對齊。我已經看遍了所有的互聯網，我只是無法做到。你如何在html5中定位div？

我想要的是在由wordpress頁面的主題確定的部分內部，是該部分左上角的空間標題，標題左側的信息框，以及下面的兩個包含表格的部分。

在這一點上，我只需要創建一個典型的網頁，我可以構建我正在構建的東西，我可以擔心稍後將其添加到wordpress中。

| ----------------------------------------- | --- ---------------------------------------- | | .......................標題...................... |。 ..........................信息..................... | | ----------------------------------------- | ------ ------------------------------------- | | ................................................ .................................................. ........ | | ................................................ 。表................................................ 。| | ................................................ .................................................. ........ | | ------------------------------------------------ ------------------------------------- |

爲什麼那麼難是超越我。

另一個問題是，我希望這是獨立於瀏覽器。我想找出一種方法在桌面計算機或平板電腦或手機屏幕上以這種方式顯示它。（這可能不是沒有一點力氣是可能的，但我想我會扔在那裏。）

由PHP生成的HTML：

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<title>Knights Tour</title> 
<link rel="stylesheet" type="text/css" href="http://bmfmain/kt/game.css"> 
<script src="http://bmfmain/kt/jquery.min.js"></script> 
</head> 
<body> 
<div id="header"> 
    <div id="title"> 
     <h1>Knight's Tour</h1> 
    </div> 

    <div id="info"> 
     <p>adsf</p> 
    </div> 
</div> 

<div id="section"> 

    <table id="game"> 
     <tr> 
      <td class="tdcls" name="0"></td> 
      <td class="tdcls" name="1"></td> 
      <td class="tdcls" name="2"></td> 
      <td class="tdcls" name="3"></td> 
      <td class="tdcls" name="4"></td> 
      <td class="tdcls" name="5"></td> 
      <td class="tdcls" name="6"></td> 
      <td class="tdcls" name="7"></td> 
     </tr> 
     <tr> 
      <td class="tdcls" name="8"></td> 
      <td class="tdcls" name="9"></td> 
      <td class="tdcls" name="10"></td> 
      <td class="tdcls" name="11"></td> 
      <td class="tdcls" name="12"></td> 
      <td class="tdcls" name="13"></td> 
      <td class="tdcls" name="14"></td> 
      <td class="tdcls" name="15"></td> 
     </tr> 
     <tr> 
      <td class="tdcls" name="16"></td> 
      <td class="tdcls" name="17"></td> 
      <td class="tdcls" name="18"></td> 
      <td class="tdcls" name="19"></td> 
      <td class="tdcls" name="20"></td> 
      <td class="tdcls" name="21"></td> 
      <td class="tdcls" name="22"></td> 
      <td class="tdcls" name="23"></td> 
     </tr> 
     <tr> 
      <td class="tdcls" name="24"></td> 
      <td class="tdcls" name="25"></td> 
      <td class="tdcls" name="26"></td> 
      <td class="tdcls" name="27"></td> 
      <td class="tdcls" name="28"></td> 
      <td class="tdcls" name="29"></td> 
      <td class="tdcls" name="30"></td> 
      <td class="tdcls" name="31"></td> 
     </tr> 
     <tr> 
      <td class="tdcls" name="32"></td> 
      <td class="tdcls" name="33"></td> 
      <td class="tdcls" name="34"></td> 
      <td class="tdcls" name="35"></td> 
      <td class="tdcls" name="36"></td> 
      <td class="tdcls" name="37"></td> 
      <td class="tdcls" name="38"></td> 
      <td class="tdcls" name="39"></td> 
     </tr> 
     <tr> 
      <td class="tdcls" name="40"></td> 
      <td class="tdcls" name="41"></td> 
      <td class="tdcls" name="42"></td> 
      <td class="tdcls" name="43"></td> 
      <td class="tdcls" name="44"></td> 
      <td class="tdcls" name="45"></td> 
      <td class="tdcls" name="46"></td> 
      <td class="tdcls" name="47"></td> 
     </tr> 
     <tr> 
      <td class="tdcls" name="48"></td> 
      <td class="tdcls" name="49"></td> 
      <td class="tdcls" name="50"></td> 
      <td class="tdcls" name="51"></td> 
      <td class="tdcls" name="52"></td> 
      <td class="tdcls" name="53"></td> 
      <td class="tdcls" name="54"></td> 
      <td class="tdcls" name="55"></td> 
     </tr> 
     <tr> 
      <td class="tdcls" name="56"></td> 
      <td class="tdcls" name="57"></td> 
      <td class="tdcls" name="58"></td> 
      <td class="tdcls" name="59"></td> 
      <td class="tdcls" name="60"></td> 
      <td class="tdcls" name="61"></td> 
      <td class="tdcls" name="62"></td> 
      <td class="tdcls" name="63"></td> 
     </tr> 
    </table> 

</div> 
<script src="http://bmfmain/kt/game.js"></script> 
</body> 
</html>

格式稍微偏離由於複製/粘貼。

當前正在使用的CSS：（將改變我的工作問題）

html, body 
{ 
margin: 0; 
padding: 0; 
} 
#header 
{ 
width: 800px; 
margin: 0 auto; 
float: top; 
padding: 5px; 

} 
#title 
{ 
width: 400px; 
text-align: center; 
float: left; 
position: absolute; 
} 
#info 
{ 
width: 400px; 
text-align: center; 
float: right; 
position: absolute; 
} 
#section 
{ 
width: 800px; 
height: 800px; 
margin: 0 auto; 
float: bottom; 

} 
table 
{ 
width: 100%; 
height: 100%; 
} 
table, th, td 
{ 
border: 1px solid #0000cc; 
border-spacing: 0.0rem; 
} 
th, td 
{ 
width: 8%; 
height: 8%; 
text-align: center; 
background-color: transparent; 
}

再次，格式是關閉的，由於不能夠直接複製/粘貼代碼到stackexchange.com來。

現在的問題是：如何讓div的顯示效果如上圖所示？如何在任何平臺，電腦，平板電腦或手機上使div出現如上圖所示？

謝謝。網頁

Current live example:

來源

2015-06-27 Joel

一開始的問題包含了很多問題，對一個如果你想針對特定設備嘗試尋找在CSS @media查詢 – Spade

和響應式設計或Twitter的自舉有沒有具有固定高度/寬度尺寸的CSS – aorfevre

只有一個問題。我如何按照上面張貼的方式安排div。我放置了一個現場演示的鏈接，以便人們可以看到它在做什麼。你能否提供某種答案？ – Joel

組織元素融入列實際上是相當困難的。該問題的兩種常見解決方案是使用引導程序和flexbox。
我使用Bootstrap是因爲我已經熟悉它，它是HTML/CSS/JS框架的聖地。在理解和使用我要指出的資源之前，你需要先學習一些基本的bootstrap熟悉。儘管這非常值得，但它會讓你的生活變得更輕鬆。下面是關於使用Bootstrap網格系統http://getbootstrap.com/examples/grid/的解釋。另外查看YouTube視頻教程，還有一些關於lynda.com的很棒的教程。

編輯：繼承人如何去做這件事。首先將Bootstrap添加到您的網站中，最簡單的方法就是使用CDN，這樣您就可以將鏈接添加到頁面頂部（儘管不一定是實現此目的的最佳方式）。許多關於如何添加bootstrap的資源。

繼承人的HTML代碼，讓你開始（這將工作當您添加自舉）：

<div class="row"> 
    <div class="col-xs-6" id="title"> 
     <h1>Knight's Tour</h1> 
    </div> 

    <div class="col-xs-6" id="info"> 
     <p>adssdfksdafhsadkhfkashdfksahdkfhakdshfkasdhfkhaskf</p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12" id="table"> 
     <ul> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
     </ul> 
    </div> 
</div>

還要注意引導處理所有不同尺寸的屏幕響應。

來源

2015-06-27 23:57:07

關於如何將建議的bootstrap應用於我的特定情況的建議如何？關於我的HTML的具體內容是「FUBAR？」 – Joel

我看到你正在使用ul/li作爲實際表格。因爲我正在寫一個遊戲，我需要特別參考每個單元格，ul/li如何更好？你可以去我的實例，看看我是如何通過jquery引用表格單元格的。有什麼不同？ – Joel

它不是更好，我只是做了這個例子，因爲它更容易輸出:) –

我用下面的html和bootstrap完成了我在上面嘗試做的事情。

echo ' 
<body> 
    <div class="container gamepage"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 "> 
       <br><p><img style="float: left;" class"gamepics" src="' . $url . '/pics/Knight.png"' . ' alt="Knight"><h1 style="float: right;" >Knight\'s Tour</h1></p> 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 visible-lg"> 
       <h3 class="infobox" name="infobox"><p>text</p><p>text</p></h3> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4"> 
       <p></p> 
       <p> 
        Knight\'s Tour is a game of a traveling chess piece. The Knight moves in "L" shaped patterns across the board, and the purpose of this game is to find each and every square of the board with the Knight using each square only once. 
       </p> 
       <p> 
        The Knight can move one space over and two up or two spaces over and one up. The piece can move in any direction, in the one and two pattern. You can start anywhere. Just click a board square. Good Luck! 
       </p> 
       <p> 
        <input class="resetboard" type="button" value="Reset Board" />&nbsp;&nbsp;&nbsp;<input class="backmove" type="button" value="Back One" /> 
       </p> 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 hidden-lg"> 
       <h3 class="infobox" name="infobox"><p>text</p><p>text</p></h3> 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"> 
       <table id="game" class="gametable">';

你可以從不同的col類報表看，引導被安排我的許多方面的內容。這些聲明也適用於許多不同的設備，包括手機。

Excellent Bootstrap Guide

Very In-depth Guide by Bootstrap

來源

2015-07-01 03:05:38 Joel

你如何在html5中定位div？

回答

相關問題