0
想要在我的網站上添加我的uni和免費Code Camp項目。我正在嘗試讓文字浮動，並且圖片隨着移動友好而浮動。出於某種原因，我只能在桌面版上看到圖片，但不能在手機上看到。圖片不顯示在手機上。只有正確的文字。起初，我一直試圖給文本col-xs-2 col-sm-2和img src =「」col-xs-8 col-sm-8，但它不起作用。現在我試圖通過將該圖片作爲該部分的背景=項目來實現理想的結果，但仍然無效。我如何在右側添加圖片？無法弄清楚我做錯了什麼？請幫忙。使文字浮動：左邊和圖片浮動：右邊是移動友好
請看附圖。
這裏是我的網站：http://www.kiljakandweb.com
Here is my **HTML**:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="javascript/main.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<section id="header" class="text-center">
<h1>Kiljak<br> + Web </h1>
<br>
<br>
<br>
<h3> I'm a freelance front-end web developer <br> based in London. I develop responsive, high-performance <br>websites using HTML5, CSS, and JavaScript.
</h3>
<br>
<a href="#googleMap"><i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i></a>
</section>
<section class="projects">
<div class="row">
<div class="col-sm-4 col-xs-4 col-md-5 col-lg-5">
<h2><span style="font-family: 'Open Sans';
font-size: 200px">01</span> Wikipedia Viewer </h2>
</div>
</div>
</section>
<div id="googleMap">
<footer>
<div class="container">
<div class="text-center">
<h4><strong>KILJAK + WEB</strong>
</h4>
<p>Ace Hotel Shoreditch
<br>London, UK E1 6JQ</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw"></i> (44) 7568599454</li>
<li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
</li>
</ul>
<hr class="small">
<p class="text-muted">Copyright © KILJAK + WEB 2016</p>
</div>
</div>
<a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
</footer>
</body>
</html>
和CSS：
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
@import url('https://fonts.googleapis.com/css?family=Oswald:300');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
#header{
width: 100%;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: white;
}
h1 {
font-family: 'Abril Fatface', cursive;
font-size: 92px;
line-height: 90px;
color: black;
}
h2 {
margin-top:250px;
float: left;
font-family: 'Abril Fatface', cursive;
font-size: 30px;
font-weight: normal;;
color: black;
}
h3 {
font-family: 'Open Sans';
font-size: 13px;
font-weight: lighter !important;
color: black;
}
hr {
color: black !important;
}
.fa {
color: black !important;
}
.fa:hover {
color: red !important;
}
.projects {
float: right;
background-image: url('images/ipad.png');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin-top:500px;
width: 100%; /* Span the entire width of the screen */
height: 800px;
}
#googleMap {
padding-top: 100px !important;
margin-top: -10px;
width: 100%; /* Span the entire width of the screen */
height: 400px; /* Set the height to 400 pixels */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* Change the color of the map to black and white */
}
footer {
position: static;
background-color: white;
padding: 100px 0;
font-family: 'Open Sans';
font-size: 13px !important;
font-weight: lighter;
line-height: 15px;
}
/* Really small phones */
@media screen and (max-width:320px) {}
/* Regular smart phones, including iPhone 6 + with 414px viewport! */
@media screen and (min-width: 321px) {}
/* Regular Tablets from 480 to 800px including Galaxy tablets - 768px is only good for iPad */
@media screen and (min-width: 481px) {}
/* Desktops and Laptops */
@media screen and (min-width: 801px) {}