在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