个人中心
gpt4 book ai didi

html - 如何使响应式 div 贴在页面边缘

转载 作者：太空宇宙 更新时间：2023-11-04 03:22:44 25 4
gpt4 key购买 nike

我希望我的响应式图片库 div“粘”在浏览器窗口的右边缘，中间没有空格(请参见下面的图片示例)。

当前站点:http://parkerrichard.com/studiogreen/html/project-01.html

它以前在我添加时有效

container {
width: 100%;
}

但现在这不会影响画廊 div (flexslider)。我试过将以下内容添加到“flexslider”css 属性，但无济于事:

flexslider {
position: absolute; 
float: right; 
right: 0px; 
width 100%;
}

似乎都没有产生预期的效果。任何建议或帮助将不胜感激。

我希望页面显示方式的示例: Image runs to right edge of screen

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset=“UTF-8”>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Studio Green</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap custom CSS -->
    <link href="css/custom.css" rel="stylesheet">

    <!-- Typekit custom fonts -->
    <script src="//use.typekit.net/bcn3ife.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>

    <link href="css/flexslider.css" rel="stylesheet">

    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    <script src="js/respond.min.js"></script>

    <!-- custom icons -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="fonts/flexslider-icon.eot">

</head>

<body>
    <!-- row 1: static navbar -->
    <nav class="navbar navbar-default navbar-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand logo" href="index.html"><img class="logo" src="img/logo.png"></a>
        </div><!-- navbar toggle -->
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="process.html">PROCESS</a></li>
            <li><a href="office.html">OFFICE</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </div><!--/nav-collapse -->
      </div><!-- container -->
    </nav><!-- navbar -->

    <!-- row 2: body -->
    <div class="container">
        <div class="row centered">

            <!-- sidebar -->
                <aside class="navbar-collapse collapse panel-group col-lg-3 col-med-4 col-sm-4 col-xs-12" id="accordion" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                  <h4 class="panel-title">
                    <li class="active">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                          RESIDENTIAL
                    </li>
                    </a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                  <div class="panel-body">
                    <ul>
                        <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
                        <li class="active"><a href="project-01.html">PROJECT <span class="spaced">1</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">2</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">3</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">4</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">5</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">6</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">7</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">8</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">9</span></a></li>
                        <li><a href="project-01.html">PROJECT  <span class="spaced">10</span></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title">
                    <a href="schools.html">
                      SCHOOLS
                    </a>
                  </h4>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title">
                    <a href="parks.html">
                      PARKS
                    </a>
                  </h4>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title">
                    <a href="hospitality.html">
                      HOSPITALITY
                    </a>
                  </h4>
                </div>
              </div>              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFive">
                  <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                      ELEMENTS
                    </a>
                  </h4>
                </div>
                <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
                  <div class="panel-body">
                    <ul>
                        <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
                        <li><a href="plants.html">ENTRY</a></li>
                        <li><a href="plants.html">FENCES</a></li>
                        <li><a href="plants.html">FIRE</a></li>
                        <li><a href="plants.html">LIGHTING</span></a></li>
                        <li><a href="plants.html">PAVING</a></li>
                        <li class="active"><a href="plants.html">PLANTS</a></li>
                        <li><a href="plants.html">POOLS</a></li>
                        <li><a href="plants.html">SEATING</a></li>
                        <li><a href="plants.html">SCULPTURE</a></li>
                        <li><a href="plants.html">STAIRS</a></li>
                        <li><a href="plants.html">SUSTAINABILITY</a></li>
                        <li><a href="plants.html">WATER</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </aside>

            <!-- slideshow gallery -->          
            <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-8 col-md-7 col-sm-7 pull-left">
                <div class="flexslider">
                  <ul class="slides">
                    <li>
                      <img src="img/project-1_01.jpg" />
                    </li>
                    <li>
                      <img src="img/project-1_02.jpg" />
                      <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
                            Location: Los Altos Hills, CA<br />
                            Architect: SDG Architects<br />
                            Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, restraint, minimalization, and restoration landscape.</p>
                    </li>
                    <li>
                      <img src="img/project-1_03.jpg" />
                      <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
                          Location: Los Altos Hills, CA<br />
                          Architect: SDG Architects<br />
                          Exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods.</p>
                    </li>
                    <li>
                      <img src="img/project-1_04.jpg" />
                    </li>
                    <li>
                      <img src="img/project-1_05.jpg" />
                      <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
                            Location: Los Altos Hills, CA<br />
                            Architect: SDG Architects<br />
                            Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along.</p>
                    </li>
                    <li>
                      <img src="img/project-1_06.jpg" />
                      <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
                            Location: Los Altos Hills, CA<br />
                            Architect: SDG Architects<br />
                            Large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass.</p>
                    </li>
                    <li>
                      <img src="img/project-1_07.jpg" />
                      <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
                            Location: Los Altos Hills, CA<br />
                            Architect: SDG Architects<br />
                            Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization.</p>
                    </li>
                    <li>
                      <img src="img/project-1_08.jpg" />
                    </li>
                  </ul>
                </div>
            </div>
            <!-- address -->
            <address>232 SIR FRANCIS DRAKE BLVD</br>
            SAN ANSELMO, CA 94960</br>
            415 721 0905</address>
        </div><!--/row -->
    </div><!--/container -->


    <!-- javaspcript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.flexslider.js"></script>
    <script>
        $(window).load(function() {
          $('.flexslider').flexslider({
            animation: "fade"
          });
        });
    </script>

</body>
</html>

CSS

/* this is a custom css stylesheet */


/* ==========================================================================
   Base Styles, Bootstrap Modifications & Fonts Import
   ========================================================================== */

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.centered {
    text-align: center;
}

.img-centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mt-lg {
    margin-top: 100px;
}

.mt {
    margin-top: 80px;
}

.mb {
    margin-bottom: 80px;
}

.drop {
    margin-bottom: -15px;
}

.spaced {
    margin-left: 37px;
}

.sm-spaced {
    margin-left: 5px;
}


/* ==========================================================================
   General styles
   ========================================================================== */

html, body {
    overflow-x: hidden;
}

body {
    font-family: "proxima-nova", sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1px;
    color: #555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

.container {
    width: 100%;
}

a {
    color: #555;
    outline: 0;
}

.strong {
    font-weight: bold;
    font-size: 13px;
}

small {
    color: #555;
}

aside {
    position: absolute;
    top: 0px;
    left: 0px;
}

address {
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    float: right;
    padding: 90px 0px 30px 15px;
    margin-right: 70px;
}

.email {
    color: #6CAA3D;
    font-weight: 400;
}

.info-box {
    float: right;
    text-align: left;
    line-height: 17px;
    font-weight: 400;
    letter-spacing: 2px;
    width: 315px;
    height: 450px;
    padding: 60px 20px 0 15px;
}

.info-box p {
    padding-top: 12px;
}

.info-box h5 {
    padding-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.contact {
    height: auto!important;
    margin-right: 5px;
    width: 315px;
}

.team-box img {
    border: 1px solid black;
    margin-bottom: 30px;
}

/* ==========================================================================
   Navigation styles
   ========================================================================== */

/*
 * Top nav section
 */

.navbar-header {
    padding-bottom: 50px;
}

.navbar-brand {
    margin-left: 0px!important;
}

.navbar .nav {
    text-align: left;
    margin-top: 45px;
}

.navbar .nav > li {
    float: none;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
}

.navbar-default {
    background-color: white;
    border-bottom: 0px;
}

.navbar-default .navbar-nav > li > a {
    color: #555;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .active > a, a:hover, a:active, a:focus {
    color: #6CAA3D;
    background-color: transparent;
    text-decoration: none;
    outline: 0;
}

.navbar-default .navbar-nav > li {
    padding: 0px 15px 15px 15px;
}

.navbar-collapse {
    margin-top: -65px;
    border-top: 0px;
    border-color: none;
}

.navbar-default .navbar-collapse {
    padding-top: 10px;
}

.logo {
    margin-top: 10px;
    height: 100px;
    width: 200px;
}

.navbar-right {
    padding: 15px 20px 0 0;
}

/*
 * Left aside nav
 */

.panel {
    border: 0px;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.0);
    box-shadow: 0 0px 0px rgba(0,0,0,.0);
    margin: 45px 0 0 100px;
}

.panel-title {
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
    color: #555;
    padding-top: 7px;
    padding-bottom: 7px;
    list-style: none;
}

.panel-title a {
    text-decoration: none;
}

.panel-default > .panel-heading {
    background-color: transparent;
    border-color: transparent;
}

.panel-body {
    margin-left: -25px;
    margin-top: -22px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.panel-body ul {
    list-style-type: none;
}

.panel-body ul li {
    padding-top: 10px;
    padding-bottom: 10px;
    letter-spacing: 1px;
}

.panel-group {
    text-align: left;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top:0px;
}

.nav-caret {
    padding-left: 10px;
    font-size: 8px;
}

/*
 * flexslider format
 */

.flexslider{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    margin:0px 0px 0px 0px !important;
}

.flex-direction-nav a  {
    color: #999 !important;
}

/*.flex-next { 
    padding-right: 40px!important;
}*/

.flex-control-nav {
    text-align: right !important;
    padding-right: 70px !important;
}

.flex-control-paging li a {
    color: transparent !important;
}

.nodot .flex-control-paging li a { 
    display: none !important;
}

.flex-control-paging li a.flex-active {
    background: #6CAA3D !important;
}

.right {
    padding-top: auto !important;
    bottom: 0;
    right: 0;
    margin-bottom: 0px;
}

.flex-caption {
    position: absolute;
    text-align: left;
    background:rgba(255, 255, 255, 0.7);
    z-index: 1;
    padding: 20px;
    font-size: 11px;
    width: 300px;
}

.flex-caption p {
    padding-top: 12px;
}

.carousel .slides > li {
    padding-right: 10px;
}

最佳答案

对于其中一个，您应该将 .flexslider 的父级 float 到右侧而不是左侧。 

<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-8 col-md-7 col-sm-7 pull-left">

您添加了一个名为 .pull-left 的类，因此我假设您可以将其更改为 .pull-right。然后你需要从 .container 中删除 padding-right: 15px 并且它应该靠在右边

关于html - 如何使响应式 div 贴在页面边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27640469/

25 4 0
文章推荐： html - 将 Div inside body 设置为 100% height less body
文章推荐： python - Pandas :通过按日期过滤来访问行
文章推荐： python - 有没有办法在管理面板中更改 textfield django 的默认文本编辑器？
文章推荐： python - 我的腌制 cookies 在 selenium - python 中不起作用？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com