0

我的 div #blue_team、.vs_img、#red_team 中有 3 个浮动元素，每次我尝试按 ctrl 时 - 它破坏了我的设计如何解决这个问题？

-------------------HTML代码：-------

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Battle Game</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="http://code.jquery.com/jquery-1.8.1.js"></script>
</head>
<body>
<div id="container">
    <div id="warriors">
        <form id="blue_team">
            <p>
                <label class="team">Green Team</label>
            </p>
            <p>
                <a href="#"><img src="resources/naruto.png" alt=""></a>
                <a href="#"><img src="resources/sasuke.png" alt=""></a>
                <a href="#"><img src="resources/sakura.png" alt=""></a>
            </p>
            <p>
                <label>Name:</label>
                    <input type="text" readonly="readonly">
                <label>Type:</label>
                    <input type="text" readonly="readonly">
            </p>
        </form>

            <img class="vs_img" src="resources/vs.png" alt="">

        <form id="red_team">
            <p>
                <label class="team">Red Team</label>
            </p>
            <p>
                <a href="#"><img src="resources/itachi.png" alt=""></a>
                <a href="#"><img src="resources/tobi.png" alt=""></a>
                <a href="#"><img src="resources/hidan.png" alt=""></a>
            </p>
            <p>
                <label>Name:</label>
                    <input type="text" readonly="readonly">
                <label>Type:</label>
                    <input type="text" readonly="readonly">
            </p>
        </form>
        <div class="clearfloats">
            <p>
                <input type="button" value="Start Battle">
            </p>
        </div>
    </div>
</div>
</body>
</html>

-------------------CSS 代码：--------

 div#container {
    background-color:#151614;
    width:800px;
    margin:0 auto;
    padding-top:8px;
    padding-bottom:8px;
}
div#warriors {
    border:1px solid #ff3534;
    width:700px;
    margin:0 auto;
    padding:8px;
}
form {
    border:1px solid #ff3534;
    width:264px;
    height:190px;
}
form#blue_team {
    float:left;
    margin-right:8px;
    margin-bottom:8px;
}
.vs_img {
    border:1px solid #ff3534;
    width:150px;
    height:190px;
    float:left; 
    margin-right:8px;
}
form#red_team {
    float:left;
    margin-bottom:8px;
}
.clearfloats {
    clear:both;
    border:1px solid #ff3534;
}
.clearfloats p {
    margin-bottom:8px;
}
p {
    width:220px;
    margin:0 auto;
    margin-top:8px;
    text-align:center;
}
label {
    display:inline-block;
    width:55px;
    text-align:right;
    color:#ff3534;
}
.team {
    border:1px solid #ff3534;
    width:150px;
    padding:8px;
    text-align:center;
}
input[type=text] {
    width:110px;
    margin-bottom:8px;
}
input[type=button] {
    width:150px;
    cursor:pointer;
}

按下 ctrl- 前的截图：

在此处输入图像描述

后：

在此处输入图像描述

4

0 回答 0