问基于w3.css模板的响应式布局覆盖内容，垂直滚动，并且内容不想居中
EN

Stack Overflow用户

提问于 2017-09-06 12:46:10

回答 1查看 637关注 0票数 1

我在这上面花了几天时间，用另一个模板重建了页面，尝试了网上的建议，这导致我进一步打破了布局。我更像是一名设计师，而不是一名程序员，我找不到我还能尝试什么。请帮帮我！我面临的问题:最糟糕的:div彼此重叠。然后中间的旋转木马过去是居中的，现在不再居中了，它也不关心边缘:自动。然后垂直卷轴就出现了。所有这些问题都与我尝试解决重叠div的响应式布局有关。好心情/屏幕大小的布局看起来像这样:好的大屏幕布局。

最差的屏幕尺寸返回如下:所有错误的布局

剥离我页面的代码：

<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/magnificpopup.css">
<link href="stylesheet.css" rel=stylesheet type="text/css">
<style>
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
</style>
<body>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-white w3-collapse w3-top w3-large w3-padding-large" style="z-index:3;width:350px;font-weight:bold;" id="mySidebar"><br>
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>
  <div class="w3-container">
    <h3 class="w3-padding-64"><br></h3>
  </div>
  <div class="w3-bar-block">
        <nav id="menu" class="leftDivPosition">
              <header>
              <a href="index.php">
                  <div class="logotype"><img src="images/logo.gif" alt="logo"></div>
              </a>
              </header>
             <ul>
              <li><div class="menuText">Photoshop</div></li>
              <li><div class="menuText">Graphic design</div></li>
              <li><div class="menuText">Product design</div><li>
              <div class="menuText">3D</div></li> 
              <li><div class="menuText">About me</div></li>
              <li><div class="menuText">Contacts</div></li>
            </ul>
        </nav>
   </div>
</div>
</nav>

<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-white w3-xlarge w3-padding">
  <a href="javascript:void(0)" class="w3-button w3-grey w3-margin-right" onclick="w3_open()">☰</a>
 </header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-row" style="margin-left:340px;margin-right:15px">
<!-- Main -->
<div class="w3-col m9 19"> 
    <div class="w3-container" id="designers" style="margin-top:75px">
        <div style="margin:auto;">
         <ul style="list-style-type:none;" id="carousel">
                <li><a class="magnificpopup" href="images/cookbook_cover_th.jpg">
                <img src="images/cookbook_cover_thsz.jpg" name="CarouselImg1"/></a></li>
                <li></li>
          </ul>
 </div> </div> 
</div>

<!--right sidebar -->
<div class="w3-col m3 13"> 
    <div class="w3-row" id="designers" style="margin-top:100px; overflow:visible;">
        <div>
                <div class="w3-col m7 w3-margin-bottom w3-padding">
                        <div class="w3-container w3-padding-large">
                             <ul>
                            <li><a href="http://facebook.com/"><i></i></a></li>
                            <li><a href="http://linkedin.com/"><i></i></a></li>
                            </ul>
                        </div>
                </div>
                <!--vertical copyright for big screens -->
                <div class="w3-container w3-col m5 w3-padding-large w3-hide-small">
                    <p style="-webkit-transform:rotate(90deg) !important;-moz-transform:rotate(90deg) !important;-o-transform: rotate(90deg !important);-ms-transform:rotate(90deg !important);transform: rotate(90deg !important);white-space:nowrap !important;display:block !important;width:20px;">© 2014 – 2017 Vidaldigital.com. All Rights Reserved.</p>
                </div>
                <!--horisontal copyright for small screens -->
                 <div class="w3-container w3-col m4 w3-padding-large w3-hide-medium w3-hide-large">                      <p>© 2014 – 2017 Vidaldigital.com</p>
                </div>
        </div>
  </div>
</div>
<!-- End page content -->
</div>
</body>
</html>

我使用的主要是css从w3.css文件，并建立了他们的室内设计模板的设计。我自己的CSS是最小的，与响应式布局无关，我假设对carousel的脚本调整也是如此，但当然，如果我能得到一些帮助，我可以分享一切。

我甚至必须补充说，当插入jQuery旋转木马时，它仍然与右侧边栏和其他内容重叠，否则它将完全不受影响。如果问题可能出在旋转木马中，我甚至添加了我所做的修改：

<script type="text/javascript">
  $(document).ready(function() {
    $("#carousel").waterwheelCarousel({
       startingItem:               1,   // item to place in the center of the carousel. Set to 0 for auto
    separation:                 255, // distance between items in carousel
    separationMultiplier:       0.6, // multipled by separation distance to increase/decrease distance for each additional item
    horizonOffset:              0,   // offset each item from the "horizon" by this amount (causes arching)
    horizonOffsetMultiplier:    1,   // multipled by horizon offset to increase/decrease offset for each additional item
    sizeMultiplier:             0.6, // determines how drastically the size of each item changes
    opacityMultiplier:          0.7, // determines how drastically the opacity of each item changes
    horizon:                    0,   // how "far in" the horizontal/vertical horizon should be set from the container wall. 0 for auto
    flankingItems:              2,   // the number of items visible on either side of the center                  

    // animation
    speed:                      3000,      // speed in milliseconds it will take to rotate from one to the next
    animationEasing:            'swing', // the easing effect to use when animating
    quickerForFurther:          true,     // set to true to make animations faster when clicking an item that is far away from the center
    edgeFadeEnabled:            true,    // when true, items fade off into nothingness when reaching the edge. false to have them move behind the center image

    // misc
    linkHandling:               2,                 // Determines behavior of links that are placed around the images. 1 to disable all (if you want to use the callback functions to do something special with the links; or used for facebook), 2 to disable all but center (to link images out).You can wrap all of the images in links if you'd like. Most people will probably want to add links around each image, but only activate the links when the center item is clicked. This is the default use case. However, you can turn all of the links off if you prefer using the callback functions to handle the links. 
    autoPlay:                   300,                 // indicate the speed in milliseconds to wait before autorotating. 0 to turn off. Positive value for a left to right movement, negative for a right to left. 
    orientation:                'vertical',      // indicate if the carousel should be 'horizontal' or 'vertical'
    activeClassName:            'carousel-center', // the name of the class given to the current item in the center
    keyboardNav:                true,             // set to true to move the carousel with the arrow keys
    keyboardNavOverride:        false,              // set to true to override the normal functionality of the arrow keys (prevents scrolling)
    imageNav:                   true,              // clicking a non-center image will rotate that image to the center.False to disable that functionality, which is commonly paired with navigational buttons instead.

    // preloader
    preloadImages:              true,  // disable/enable the image preloader.The carousel will attempt to preload all images before initializing. This is known to have some issues in certain browsers. The main reason for the preloader is too be able to determine the dimensions for each image before running calculations. If you run into issues, disable this and use the forced proportions below (or set your image dimensions using CSS). 
    forcedImageWidth:           0,     // Set a global width that should be applied to all images in the carousel. specify width of all images; otherwise the carousel tries to calculate it
    forcedImageHeight:          0,     // Set a global height that should be applied to all images in the carousel. specify height of all images; otherwise the carousel tries to calculate it

    // callback functions
    movingToCenter:             $.noop, // fired when an item is about to move to the center position
    movedToCenter:              $.noop, // fired when an item has finished moving to the center
    clickedCenter:              $.noop, // fired when the center item has been clicked
    movingFromCenter:           $.noop, // fired when an item is about to leave the center position
    movedFromCenter:            $.noop 

      // include options like this:
      // (use quotes only for string values, and no trailing comma after last option)
      // option: value,
      // option: value
    });
});
</script>

css

responsive

w3.css

html

回答 1

Stack Overflow用户

发布于 2017-09-06 12:55:18

至于你的居中问题，我想是在html的这一部分：

<div class="w3-col m9 19"> 
   <div class="w3-container" id="designers" style="margin-top:75px">
      <div style="margin:auto;">
         <ul style="list-style-type:none;" id="carousel">
            <li>
               <a class="magnificpopup" href="images/cookbook_cover_th.jpg">
                  <img src="images/cookbook_cover_thsz.jpg" name="CarouselImg1"/>
               </a>
            </li>
            <li></li>
         </ul>
      </div>
   </div> 
</div>

我认为您正在尝试将第三个div居中放置在第一个div中，该第一个div被设置为预设的列宽度。但是，在它们之间的第二个div正在成为障碍。第三个div居中，但它在第二个div内居中。但是第二个div只需要和第三个div一样宽(以容纳它)。第二个div没有在第一个div中居中，因为您没有告诉它是居中的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46075651

复制

内容垂直居中

腾讯云测试服务 css html

测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容

GhostZhang

2022/08/21

9990

flex布局垂直居中并换行展示内容