Question

我已经好几个小时试图让几个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:

Answer 1

将网页元素组织成列实际上非常困难。这个问题的两个常见解决方案是使用bootstrap和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>

另请注意，bootstrap处理不同大小屏幕的所有响应。

Answer 2

我使用以下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类语句中可以看出，bootstrap正在以多种方式安排我的内容。这些陈述也适用于许多不同的设备，包括电话。

Excellent Bootstrap Guide

Very In-depth Guide by Bootstrap

你如何在html5中定位div？

2 个答案: