在html中定位，并在页面右侧添加空白
[英]Positioning in html, and whitespace to the right of the page
问题描述
So I'm new to html and css, and right now I'm trying to figure out how to fix the positioning on this page. 
因此，我是html和css的新手，现在我正在尝试找出如何解决此页面上的位置问题。
It normally looks like the first image in the album: 通常看起来像相册中的第一张图片：
http://imgur.com/a/LHbRp http://imgur.com/a/LHbRp
But for some reason there is this white-space to the left which can be scrolled to if, overflow-x is not "hidden" like the second picture of that album. 但是由于某种原因，左边的空白可以滚动到if-x是否像该专辑的第二张图片一样“隐藏”。
Also, I don't know if you people go on facebook or other websites (like this one even), but when you resize a page, the elements on the page don't start just jumping around, but if I have overflow-x: hidden; 另外，我不知道您是否在Facebook或其他网站（甚至是类似的网站）上访问，但是当您调整页面大小时，页面上的元素不会只是跳来跳去，而是如果我有溢出-x ：隐藏 then I assume they elements have to jump around, and the text will start to wrap, like third picture in the album. 然后我假设它们必须跳来跳去，并且文字将开始换行，例如相册中的第三张图片。
So how do I go about making the page not move around when the window is resized, and as a bonus, what is that whitespace? 因此，当调整窗口大小时，如何使页面不移动呢？作为奖励，空白是什么？
-Chris -克里斯
EDIT (some code): 编辑（一些代码）：
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="shift.css">
</head>
<body>
<div id="wrapper">
<!-- Navbar stuff -->
<div class="nav">
<div class="container">
<ul class = "pull-left">
<li><a href="#">Logo</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul class = "pull-right">
<li><a href="#">Sign Up/Login</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
<!-- Main swipey thing -->
<div class ="jumbotron">
<div class ="container">
<h1>Blah blah blah</h1>
</div>
</div>
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="container">
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="container">
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="container">
<ul class="pull-right">
<li><a href="#">Contact</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Bug Tracking</a></li>
</ul>
</div>
</div>
</body>
And the css: 和CSS：
/*! Other stuff */
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
/*! Navbar css */
.nav {
background-color: #DEB087;
border-bottom: 1px solid #DEB087;
}
.nav a {
color: #875D4B;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
}
.nav li {
display: inline;
}
/*! jumbotron */
.jumbotron {
background-image:url('http://goo.gl/04j7Nn');
height: 500px;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #DEB087;
font-size: 40px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
/*! Buy/Sell */
.portals {
background-color: #f7f7f7;
padding: 14px 10px;
border-bottom: 1px solid #dbdbdb;
float:none;
}
.buy-portal h3 {
font-size:20px;
}
.sell-portal h3 {
font-size:20px;
}
/*! Footer */
.footer {
background-color: #49484C;
}
.footer a {
color: #E8E5F2;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
}
.footer ul {
list-style-type: none;
}
1 个解决方案
解决方案1
1 2014-08-12 09:36:57
please rename class container on your script HTML. 请在脚本HTML上重命名类容器 。 Before: 之前：
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="container"> <!--Rename "container" with another name -->
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="container"> <!--Rename "container" with another name -->
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
After: 后：
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="content"> <!-- "container" replace with "content" -->
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="content"> <!-- "container" replace with "content" -->
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
and I also changed a little in class "jumbotron" you, hails like this: 而且我还在“超大型”课程中对您进行了一些更改，如下所示：
.jumbotron {
background: url ("http://goo.gl/04j7Nn") no-repeat scroll center center / cover RGBA (0, 0, 0, 0);
height: 500px;
text-align: center;
}
Result : Here on jsfiddle 结果： 在jsfiddle上
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.