0
私はここに来ました。私はあなたが簡単に修正できると思われる非常に厄介な問題に直面しています。しかし、私は過去1時間にこれを理解しようとしています。ここで私のレイアウトはランダムな余白を作成しています
は私の問題ですが、私はこの問題を示すために、その周りに赤いボックスが描画されている - ここ 
下記参照htmlコードされる -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><a href="index.html"><span>HOME</span></a></li>
<li><a href="vehicles.html"><span>VEHICLES</span></a></li>
<li><a href="mybmw.html"><span>MY BMW</span></a></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg">
<div><img src="img/specials.png"></div>
<div class="fix"></div>
</div>
</div>
</body>
</html>
ここでは、CSSです -
/* my official site styles */
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
私は助けてくれてありがとうございます！
私の良い男。あなたは文字通りそれを修正しました。私が間違っていることをあなたに教えてください。私は次回のために知りたいです！ –
divを含む1つの画像とdivを含まないもう1つの画像。私はそれらの画像を削除して幅を設定しました。 – Mani