2016-03-21 2 views
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>

+0

Pls Code aktualisieren und Bilder hinzufügen, die Leerzeichen zeigen. Ich werde daran arbeiten. – Dev

+0

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

Antwort

0

Versuchen Sie, so etwas wie dies zu erreichen?

https://jsfiddle.net/49gg12nr/2/

background-size:100% 100%;

scheint zu sein, was Sie

bearbeiten fehlen: Aktualisiert Link

Edit2: Aktualisiert-Link (wieder), entfernt die alte Hintergrund-size: enthalten ; Es kann helfen, die Unterschiede zwischen enthalten und 100% 100% zu lesen. Von den unten stehenden Link können Sie sehen, dass enthalten tut nur das, es macht es so, dass das Bild in dem Behälter enthalten sein wird, aber es hält Anteile gleich. 100% 100% bewirkt, dass das Bild, um den Behälter zu füllen, aber ignoriert Proportionen. Sie können nicht beide haben, es sei denn, Sie legen fest, dass der Container konsistente Proportionen hat.

http://www.w3schools.com/cssref/css3_pr_background-size.asp