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- を押す前のスクリーンショット:
後：
