个人中心
gpt4 book ai didi

CSS div 放置

转载 作者：太空宇宙 更新时间：2023-11-04 04:34:45 28 4
gpt4 key购买 nike

首先，请引用下图:enter image description here

这基本上是我对布局的想法。

我想要的是:

  • 内容 div 成为“主要焦点”，例如当浏览器
    调整大小，它应该留在中间；
  • 当浏览器被调整大小时，我希望这两个图像基本上
    位于内容 div 下方。 (不完全确定如何解释
    这个，但我希望你能理解)；
  • 它可能(并且将会)发生浏览器比
    1400px (200 + 1000 + 200)，在这种情况下，我想要左图
    尽可能地贴在左边，右边的图像也一样
    尽可能靠右；
  • 我也不希望在浏览器运行时出现侧滚动条
    调整大小。 (或者更确切地说，宽度小于 1400 像素)。

    • 这些是我目前能想到的所有要求。

    我一直在使用各种方法查找 css 内容并在 css 中搞砸了好几个小时，但从未得到我想要的效果。我有几次非常接近解决方案，但只是错过了一个 CSS 元素或其他什么，这并非不可能。尝试使用 z-index、float 和其他一些东西。

    有人可以帮帮我吗？

    提前致谢。

    代码示例:

    CSS: 
    #backgroundimages {
        overflow:hidden;
        height: 1000px;
    }

    #imageleft{
        float:left;
        background: url(homebg.png);
        height: 1000px;
        width: 445px;
    }


    #imageright{
        background: url(homebg2.png);
        float:right;
        height: 1000px;
        width: 445px;
    }


    #middlecontent {
        float:left;
        overflow:visible;
        height: 1000px;
        width: 1000px;
        margin-left: auto;
        background-color: red;
    }

    HTML: 
    <div id="backgroundimages">
        <div id="imageleft"></div>
        <div id="middlecontent"></div>
        <div id="imageright"></div>
    </div>

    例如，这看起来与我想要完成的非常接近，但首先内容 div 没有居中，每当我调整它的大小时，它仍然专注于左侧的图像。

    最佳答案

    这就是我的做法......我并不是说这是最好的解决方案。我觉得 CSS 媒体查询的支持还不够好，所以我整理了一小段 jQuery 来帮助我... http://jsfiddle.net/ZdR8P/

    顺便说一句，我不是最好的 jQuery 程序员，所以可能有更好的方法来实现相同的结果(总是欢迎来自更好的 jQuery 程序员的反馈!)

    这是HTML

    <body>
        <div id="one">Content in here</div>
        <div id="two">Content in here</div>
        <div id="three">Content in here</div>
    </body>

    jQuery 
    $(document).ready(function(){

    var reportWidth = true;

    if (reportWidth){
        $('body').append('<div id="reportWidth">'); 
        $('#reportWidth').css({
            position:'fixed',
            bottom:0,
            left:0,
            right:0,
            backgroundColor:'#666666',
            color:'#ffffff'
        })
    }

        var breakpoint=new Array();
        breakpoint.push(320); // iPhone 4 & 5 in portrait
        breakpoint.push(480); // iPhone 4 in landscape
        breakpoint.push(568); // iPhone 5 in landscape
        breakpoint.push(768); // iPad in portrait
        detectViewportWidth(breakpoint,reportWidth);
        $(window).resize(function(){
        detectViewportWidth(breakpoint,reportWidth)
        });
    });

    function detectViewportWidth(breakpoint,reportWidth){
        var htmlClassPrefix='pageWidth-';
        var currentWidth=$(window).width();
        var noBreakpoints=breakpoint.length;
        var widthClass=noBreakpoints+'-'+(noBreakpoints+1);
        $('html').removeClass(htmlClassPrefix+widthClass);
        var previousArrayVal=0;
        $.each(breakpoint,function(arrayKey,arrayVal){
            $('html').removeClass(htmlClassPrefix+arrayKey+'-'+(arrayKey+1));
            if (currentWidth<=arrayVal && currentWidth>previousArrayVal){
                widthClass=arrayKey+'-'+(arrayKey+1);
            }
            previousArrayVal=arrayVal;
        });
        $('html').addClass(htmlClassPrefix+widthClass);
        if (reportWidth){
            $('#reportWidth').text(htmlClassPrefix+widthClass); 
        }
    }

    和CSS: 
    div {
        border:1px solid #999999;
        display:inline-block;
        width: 29%;
        margin: 0 1%;
    }
    .pageWidth-0-1 div,
    .pageWidth-1-2 div
    {
        display:block;
        width:98%;
    }

    基本上它的作用是检测视口(viewport)的宽度，并沿着 .pageWidth-2-3 的行将一个类应用于 body 标签。如果您更改 Pane 的大小，您将看到底部的小状态栏相应地发生变化。 .pageWidth-0-1 是最窄的，而 .pageWidt-4-5 是最宽的(但理论上你可以在 jQuery 中设置多少个分区——或“断点”)。

    然后，在您的 CSS 中设置默认布局 - 您可能希望默认布局是正常的三列布局，如我在 fiddle 中所示 - 这假设您的大部分访问者将在普通监视器上查看.. 。 例如。

    然后，您可以为视口(viewport)变小时定义特定的样式行为。希望您能看到，在我的 CSS 中，我设置了一个基本的三列布局，当 div 变为全宽并阻塞时，pageWidth 为 .pageWidth-0-1 或 .pageWidth-1-2 时会覆盖。

    尝试更改 fiddle 中 Pane 的宽度，当它变得足够窄时，您应该会看到 div 落入垂直列中。

    希望这可以给你一个起点？

    关于CSS div 放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16604940/

    28 4 0
    文章推荐： python - 如何将属性添加到作为组存储在 HDF5 文件中的 Pandas 数据帧？
    文章推荐： c - 如何用 millis() 替换 delay()？
    文章推荐： c - 在 RTOS 中安排帧的传输
    文章推荐： mysql - 来自 127.0.0.1 的 TIME_WAIT 过多
    太空宇宙
    个人简介

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

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