0
Raum CSS los
ich in meiner Web-Seite zu teilen bin versucht zu vier gleichen Teilen. Ich hatte ein paar Tipps Online gefunden, die die folgenden Funktionen ausführen:Brauchen Sie Hilfe,
html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
}
div {
width: 50%;
height: 50%;
float: left;
}
Das Problem ist, wenn ich das mache ich schwarzen Raum rechts von jedem Bild, das ich will, um loszuwerden. Ich habe versucht, den Schwimmer loszuwerden, aber dann war die Seite nicht mehr in 4 Teile aufgeteilt. Wie würde ich es bekommen, damit jedes div mit einem Bild vollständig mit dem Bild gefüllt ist?
body {
\t background-color: black;
}
.next {
\t color: #995c00;
\t vertical-align: center;
}
h1 {
\t color: #995c00;
\t font-family: Garamond ;
\t font-size: 50px;
\t text-align: center;
display:table-cell;
vertical-align:middle;
}
h2 {
\t color: #995c00;
\t font-family: Garamond;
}
ul {
\t color: #995c00;
\t font-family: Garamond;
}
/*body {
position: fixed;
top: 35%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}*/
.result-section{
\t color: #995c00;
\t font-family: Garamond ;
}
html, body { height: 100%; min-height:100%; padding: 0; margin: 0; }
#div1 {width:50%;
height:50%;
float:left;
position:relative;
}
#div2 { background-image: url(pictures/drums.jpg);
\t \t background-repeat:no-repeat;
background-size:contain;
width:50%;
height:50%;
float:left;
position:relative;
}
#div3 { background-image: url(pictures/keyboard.jpg);
\t \t background-repeat:no-repeat;
background-size:contain;
width:50%;
height:50%;
float:left;
position:relative;
}
#div4 { background-image: url(pictures/mixer_2.jpg);
\t \t background-repeat:no-repeat;
background-size:contain;
width:50%;
height:50%;
float:left;
position:relative;
}<!DOCTYPE html>
<html lang="en">
<head>
<TITLE>2016 Grammy Quiz</TITLE>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="div1">
<div id = 'container'>
<h1> 2016 Grammy Quiz</h1>
<h2 id='questionTitle'> </h2>
<ul id ='selectionList'> </ul>
<button type="button" class = 'next'> Next </button>
<section class="result-section" style="display: none;">
<h2 class="text"> Final Score </h2>
<h3 class="text" id="finalScore">10/10</h3>
<div id="result_msg"></div>
<button class="start-button" id="tryagain">Try Again</button>
</section>
</div>
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Pls Code aktualisieren und Bilder hinzufügen, die Leerzeichen zeigen. Ich werde daran arbeiten. – Dev
Es wäre hilfreich, wenn Sie Ihren Code mit Bildern online gehostet aktualisieren können damit wir sehen können, was Sie sehen. Mit dem, was Sie gepostet haben, ist es nicht möglich zu sagen, ob die Hintergrundbilder das Problem oder Ihre Floated DIVs sind. Außerdem wäre es gut zu wissen, auf welchem Betriebssystem und in welchem Browser dieses Problem auftritt. – Angelique