Question

试图调整浏览器的大小，当我收缩过“绿色”的边缘时，我似乎无法在页面中保持div“stickyslider”。
是的我知道它的填充，但无论如何将滑块放在该位置而不调整它直到两个元素（菜单和滑块）都是全宽

我是新手，所以我的代码相当恶心。

但是你可以告诉滑块，下拉。

对我如何做事的任何批评都非常感激。

a{
     color: black;
 }
.menu{
    display: inline-table;
    padding-top: 15%;
    max-width: 150px;
}


.stickyslider{
    padding-top: 15%;
    padding-right: 25%;
    padding-bottom: 15%;
    float: right;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div class="container">
    <nav class="menu">
        <a><u>name</u></a><br>
        <a>123 fake street</a><br>
        <a>+61 4 00000000</a><br>
        <br>
        <br>
        <a></a><br>
        <a></a><br>
        <a></a><br>
        <br>
        <a>Example1</a><br>
        <a>Example2</a><br>
        <a>Example3</a><br>
        <br>
        <br>
        <a>Example4</a><br>
        <a>Example5</a><br>
        <a>Example6</a><br>

        <a>Example7</a><br>
        <a>Example8</a><br>
        <a>Example9</a><br>
    </nav>
    <div class="stickyslider">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="architecture">
            </div>

            <div class="item">
                <img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="more architecture">
            </div>

            <div class="item">
                <img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="heaps architecture">
            </div>

            <div class="item">
                <img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="architecture">
            </div>
        </div>

        <!-- Left and right controls -->

        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
        </div>
</div>

</body>
</html>

Answer 1

.stickyslider{
padding-top: 15%;
padding-right: 25%;
padding-bottom: 15%;
max-width: 20%;
float: right;
}

添加最大宽度对此代码块有效。

将元素移动到左侧而不通过调整大小移动元素

1 个答案: