0
私のウェブページを4等分することを試みています。問題は、私はこれを行うとき、私は取り除くしたい各写真の右側に黒いスペースがあるスペースを取り除く手助けが必要です。CSS
html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
}
div {
width: 50%;
height: 50%;
float: left;
}
：私は、次の操作を実行するといくつかのヒントをオンラインで発見しました。私はフロートを取り除こうとしましたが、ページは4つの部分に分割されませんでした。どのように私はそれを取得するので、画像の各divは完全に画像で満たされている？
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は空白を表示している画像を追加します。私はそれに取り組んでいきます。 – Dev
オンラインでホストされている画像でコードを更新すれば、あなたが見ているものを見ることができます。あなたが投稿したものでは、背景画像が問題であるのか、フローティングDIVであるのかを知ることはできません。また、この問題が発生しているOSやブラウザについて知っておくとよいでしょう。 – Angelique