Css 您如何定位div'；html5中的什么？
我已经花了几个小时试图让几个div正确显示和对齐。我在互联网上找遍了，就是找不到正确的答案 我想要的是一个由wordpress页面的主题决定的部分，是该部分左上角的空间标题，标题左侧的信息框，在这两个部分的下面是一个包含表格的部分 在这一点上，我只需要制作一个典型的网页，在这里我可以构建我正在构建的东西，我可以担心以后将它添加到wordpress中 |-----------------------------------------|-------------------------------------------| |标题信息| |-----------------------------------------|-------------------------------------------| |..........................................................................................................| |表格| |..........................................................................................................| |-------------------------------------------------------------------------------------| 我不明白为什么这么难 另一个问题是，我希望它独立于浏览器。我想找出一种方法，让它以这种方式显示在台式电脑、平板电脑或手机屏幕上。（不费一点力气，这可能是不可能的，但我想我会把它扔出去。） php生成的html：Css 您如何定位div'；html5中的什么？,css,html,Css,Html,我已经花了几个小时试图让几个div正确显示和对齐。我在互联网上找遍了，就是找不到正确的答案 我想要的是一个由wordpress页面的主题决定的部分，是该部分左上角的空间标题，标题左侧的信息框，在这两个部分的下面是一个包含表格的部分 在这一点上，我只需要制作一个典型的网页，在这里我可以构建我正在构建的东西，我可以担心以后将它添加到wordpress中 |-----------------------------------------|-------------------------------
<!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>
将网页元素组织成列实际上是相当困难的。两种常见的解决方案是使用引导和flexbox。
我使用Bootstrap是因为我已经熟悉它，它有点像HTML/CSS/JS框架的holygrail。在理解和使用我将向您介绍的资源之前，您需要对引导程序有一些基本的了解。这是非常值得的时间，但它会让你的生活更容易。下面是关于使用引导网格系统的说明。还可以查看youtube视频教程，还有一些很棒的教程 编辑：下面是我如何着手做的。首先，将引导添加到您的网站，最简单的方法是使用CDN，这样您就可以在页面顶部添加一个链接（尽管不一定是最好的方法）。许多关于如何添加引导的在线资源
以下是帮助您开始的html代码（当您添加引导时，这将起作用）：
骑士之旅
ADSSDFKSDAFHSADKHFKASHFKHASKF
- 一,
- 二,
- 三,
还请注意，引导处理不同大小屏幕的所有响应。我用下面的html和引导完成了上面尝试做的事情
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" /> <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">';
echo'
骑士之旅
文本文本
骑士之旅是一场旅行棋子的游戏。骑士在棋盘上以“L”形移动，本游戏的目的是找到棋盘上的每一个方块，而骑士只使用每一个方块一次。
骑士可以移动一个空格和两个空格或两个空格和一个空格。这件作品可以在任何方向移动，在一和二模式。你可以从任何地方开始。只需点击一个方块。祝你好运
文本文本
';
col首先，这个问题包含许多问题，例如，如果你想针对某个设备，请查看css@media queriesand responsive design或没有固定高度/宽度css的twitter引导size@Joel这两条评论对你的问题都有意义。考虑学习和调查这些评论来解决你的问题。您当前的解决方案将永远无法工作，因为您的屏幕分辨率与我的不同，并且。。因此，你的表现也会有所不同。没有人在侮辱你，我们开始试图帮助你，直到你决定对我们的观点不感兴趣。我想你需要冷静下来。这里没有人侮辱你。Kepoly只是表示不清楚你在问什么，这是一个将问题集中到核心问题的好机会。aorfevre为他们认为有用的技术提供了建议。他们在尽力帮助我，我不会猛烈抨击他们，我会注意他们的建议。如果它们不适用，这可能是一个信号，表明您可以澄清您的问题，或者在下次提问时牢记这一点。如何将建议的引导应用于我的特定情况？我的HTML的具体内容是“FUBAR？”我看到您使用ul/li作为实际表。因为我正在写一个游戏，我需要具体地分别引用每个单元格，ul/li如何更好？你可以看看我的实例，看看我是如何引用的
<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>
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" /> <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">';