在html中定位，并在页面右侧添加空白

Question

因此，我是html和css的新手，现在我正在尝试找出如何解决此页面上的位置问题。

通常看起来像相册中的第一张图片：

但是由于某种原因，左边的空白可以滚动到if-x是否像该专辑的第二张图片一样“隐藏”。

另外，我不知道您是否在Facebook或其他网站（甚至是类似的网站）上访问，但是当您调整页面大小时，页面上的元素不会只是跳来跳去，而是如果我有溢出-x ：隐藏 然后我假设它们必须跳来跳去，并且文字将开始换行，例如相册中的第三张图片。

因此，当调整窗口大小时，如何使页面不移动呢？作为奖励，空白是什么？

-克里斯

编辑（一些代码）：

<!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>

和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;
}

Answer 1

请在脚本HTML上重命名类容器。 之前：

<!-- 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>

后：

<!-- 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>

而且我还在“超大型”课程中对您进行了一些更改，如下所示：

.jumbotron {
     background: url ("http://goo.gl/04j7Nn") no-repeat scroll center center / cover RGBA (0, 0, 0, 0); 
     height: 500px; 
     text-align: center; 
}

结果：在jsfiddle上

希望能有所帮助。

在html中定位，并在页面右侧添加空白

问题描述

1 个解决方案

解决方案1
1 2014-08-12 09:36:57

在html中定位，并在页面右侧添加空白

问题描述

1 个解决方案

解决方案1 1 2014-08-12 09:36:57

解决方案1
1 2014-08-12 09:36:57