Question

所以我是html和css的新手，现在我正在试图弄清楚如何修复此页面上的定位。

它通常看起来像专辑中的第一张图片：

但是由于某种原因，左边有一个白色空间可以滚动到，如果，overflow-x不是＆＃34;隐藏＆＃34;就像那张专辑的第二张照片。

此外，我不知道你们是否会访问Facebook或其他网站（甚至是这样的网站），但是当你调整页面大小时，页面上的元素不会开始跳转，但如果我有溢出-x：隐藏;然后我假设他们的元素必须跳转，文本将开始包装，就像专辑中的第三张图片一样。

那么，当窗口调整大小时，如何让页面不会移动，作为奖励，这个空白是什么？

-Chris

编辑（一些代码）：

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

我也在课堂上改变了一点＆＃34; jumbotron＆＃34;你这样欢呼：

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

结果：Here on jsfiddle

希望有所帮助。

在html中定位，在页面右侧放置空格

1 个答案: