Question

在：http://www.fmancoding.com他们是本周特色游戏＆＃34;以及＃34;显示所有游戏，然后显示它的标题和描述。除了移动设备外，它看起来完全符合我的要求。在移动设备上，图像被标签化并相互接触。

有谁知道为什么会这样？我在每个div之间都有休息时间，我相信div会自动创建在一个新行上，就像段落一样。此外，我添加了填充和边距，看看这是否能解决问题，但事实并非如此。

HTML：

count = count + 5

CSS：

<html>
    <head>
        <link href="Styles.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="Javascript.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <title>Fman Coding</title>
    </head>
    <body>
        <center id="headerBox">
            <h1 id="header">Welcome To Fman Coding</h1>
            <h2 id="header">Most Games Are Mobile Friendly, And Can Be Used Offline!</h2>
        </center>
        <div id="MG">
            <div id="FG">
                <p id="ft">This Week's Featured Game!</p>
                <a href="Games/Miji.html"><img src="Games/Murderer.jpeg" width="100%" height="30%" alt="Miji"></a>
                <!-- Game Name & Description -->
                <p id="FGD">Miji! Input Your Number Of Players And It Will Automatically Generate Everyone's Job!</p>
            </div>
            <div id="gLibrary">
                <!-- Games -->
                <div id="gameFrame"><a href="Games/Miji.html"><img id="float" src="Games/Murderer.jpeg" width="15%" height="15%"></a><br/>
                    <h4 id="gameTitle">Miji</h4>
                    <span id="desc">This game auto selects your positions based on the number of people playing!</span>
                </div>
                <!-- Next Game -->
                <br/>
                <!-- Next Game -->
                <div id="gameFrame"><a href="Games/RPS.html"><img id="float" src="Games/RPS.jpg" width="15%" height="15%"></a><br/>
                    <h4 id="gameTitle">Rock, Paper, Scissors</h4>
                    <span id="desc">You can play Rock, Paper, Scissors, Shoot against a computer!</span>
                </div>
                <!-- Next Game -->
                <br/>
                <!-- Next Game -->
                <div id="gameFrame"><a href="MC/index.html"><img id="float" src="MC/Click.jpg" width="15%" height="15%"></a><br/>
                    <h4 id="gameTitle">Minecraft Player Finder</h4>
                    <span id="desc">Create groups for certain games and find players to play, or help you build stuff!</span>
                </div>
            </div>
        </div>
    </body>

</html>

Answer 1

#gLibrary应显示为块，而不是inline：

#gLibrary{
    color: #989898;
    margin: 15px;
    display: block;
}

移动Versoin线路中断不起作用

1 个答案: