CSS-使用<；部门>；获取地铁风格主题_Css_Html

CSS-使用<；部门>；获取地铁风格主题

css html

CSS-使用<；部门>；获取地铁风格主题,css,html,Css,Html,在CSS大师跳下我的喉咙之前，我确实知道如何以我想要的方式在CSS中安排块。我特别想要的是一种在调整浏览器窗口大小时调整块大小的方法（更重要的是在平板电脑从横向变为纵向时）因此，当我重新调整浏览器的大小时，块应该可以很好地移动，并保持在浏览器窗口中我在这里使用绝对值来定位，我确信这就是原因。但是使用relative和fixed，我首先无法使div对齐：| 感谢您的帮助/建议/指导：）有很多js库可以帮助您实现您想要实现的目标。例如，请参见： - - -重建小提琴：我就是这样做的这只

在CSS大师跳下我的喉咙之前，我确实知道如何以我想要的方式在CSS中安排块。我特别想要的是一种在调整浏览器窗口大小时调整块大小的方法（更重要的是在平板电脑从横向变为纵向时）

因此，当我重新调整浏览器的大小时，块应该可以很好地移动，并保持在浏览器窗口中

我在这里使用绝对值来定位，我确信这就是原因。但是使用relative和fixed，我首先无法使div对齐：|

感谢您的帮助/建议/指导：）

有很多js库可以帮助您实现您想要实现的目标。例如，请参见：

-
-
-
重建小提琴：我就是这样做的

这只是使用数学，你不需要

媒体查询

来回答你的问题。将所有静态数字更改为百分比。使用

javascript

设置任何垂直数字

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
    <style type="text/css">
    .boxes {
        width:100%; /* 700px */;
        height:auto; /* 220px */;
        overflow:hidden;
    }
    .box {
        display: inline-block;
        float:left;
        border-color:transparent white white transparent;
        border-width:0 10px 10px 0; /* this will be set/updated with js */
        border-style:none solid solid none;
    }
    .box-small {
        height:100px; /* this will be set with js or you can use a resized image */
        width:14.285%; /* 100px/700px */
    }
    .box-big {
        height:210px; /* this will be set with js or you can use a resized img */
        width:30%; /* 210/700 */
    }
    .box-red {
        background-color: red;
    }
    .box-blue {
        background-color: blue;
    }
    .box-green {
        background-color: green;
    }
    .box-black {
        background-color: black;
    }
    .box-yellow {
        background-color: yellow;
    }
    .box-brown {
        background-color: brown;
    }
    .box-aqua {
        background-color: aqua;
    }
    .box-orange {
        background-color: orange;
    }
    .box-silver {
        background-color: silver;
    }
    </style>
  </head>
  <body>
        <div class="boxes">
            <div class="box box-big box-red"></div>
            <div class="box box-small box-blue"></div>
            <div class="box box-small box-green"></div>
            <div class="box box-small box-black"></div>
            <div class="box box-small box-yellow"></div>
            <div class="box box-small box-brown"></div>
            <div class="box box-small box-aqua"></div>
            <div class="box box-small box-orange"></div>
            <div class="box box-small box-silver"></div>
        </div>
        <hr/>
        <div class="boxes">
            <div class="box box-small box-red"></div>
            <div class="box box-small box-blue"></div>
            <div class="box box-small box-green"></div>
            <div class="box box-small box-brown"></div>
            <div class="box box-small box-aqua"></div>
            <div class="box box-small box-orange"></div>
            <div class="box box-small box-red"></div>
            <div class="box box-small box-blue"></div>
            <div class="box box-small box-green"></div>
            <div class="box box-small box-brown"></div>
            <div class="box box-small box-aqua"></div>
            <div class="box box-small box-orange"></div>
        </div>
        <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script>
        (function(){
            var boxSizing = function(){
                $(".box").each(function(){
                    var $this = $(this),
                            thisWidth = $this.css("width"),
                            borderWidth = (10/700 * parseInt($(".boxes").css("width"))) + "px";
                    console.log(borderWidth);
                    $this.css({"height":thisWidth, "border-width":"0 " + borderWidth + " " + borderWidth + " 0"});
                });
            }
            $(window).resize(boxSizing);
            boxSizing();
        })();
        </script>
  </body>
</html>


.盒子{
宽度：100%；/*700px*/；
高度：自动；/*220px*/；
溢出：隐藏；
}
.盒子{
显示：内联块；
浮动：左；
边框颜色：透明白色透明；
边框宽度：0 10px 10px 0；/*这将使用js进行设置/更新*/
边框样式：无实体无实体；
}
.小盒子{
高度：100px；/*这将由js设置，或者您可以使用调整大小的图像*/
宽度：14.285%；/*100px/700px*/
}
.大箱子{
高度：210px；/*这将由js设置，或者您可以使用调整大小的img*/
宽度：30%；/*210/700*/
}
.盒子红{
背景色：红色；
}
.蓝色盒子{
背景颜色：蓝色；
}
.盒子绿{
背景颜色：绿色；
}
.黑盒子{
背景色：黑色；
}
.黄色盒子{
背景颜色：黄色；
}
布朗先生{
背景颜色：棕色；
}
.box aqua{
背景色：浅绿色；
}
.盒子橙{
背景颜色：橙色；
}
.盒子银{
背景颜色：银色；
}

（功能（）{
var boxsize=函数（）{
$（“.box”）。每个（函数（）{
变量$this=$（this），
thisWidth=$this.css（“宽度”），
边框宽度=（10/700*parseInt（$（“.box”）.css（“宽度”））+“px”；
console.log（边框宽度）；
$this.css（{“height”：thisWidth，“border width”：“0”+borderWidth+“”+borderWidth+“0”}）；
});
}
$（窗口）。调整大小（框大小）；
盒子尺寸（）；
})();

你听说过css类吗？如果你想搜索css媒体查询，这将解决你的问题。是的，如果你使用的类少写20次，你就必须编写

display:inline block；位置：绝对位置。正如aaronmallen所说，媒体查询会帮你解决问题。这段代码让我感到非常不安。我希望我没有让任何人失去对人性的信心！我只是测试了2-3个块，然后继续添加其他块。这绝对不可能投入生产，这是件美丽的事情！我只是想使用css，但这正是我需要它的方式！
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
    <style type="text/css">
    .boxes {
        width:100%; /* 700px */;
        height:auto; /* 220px */;
        overflow:hidden;
    }
    .box {
        display: inline-block;
        float:left;
        border-color:transparent white white transparent;
        border-width:0 10px 10px 0; /* this will be set/updated with js */
        border-style:none solid solid none;
    }
    .box-small {
        height:100px; /* this will be set with js or you can use a resized image */
        width:14.285%; /* 100px/700px */
    }
    .box-big {
        height:210px; /* this will be set with js or you can use a resized img */
        width:30%; /* 210/700 */
    }
    .box-red {
        background-color: red;
    }
    .box-blue {
        background-color: blue;
    }
    .box-green {
        background-color: green;
    }
    .box-black {
        background-color: black;
    }
    .box-yellow {
        background-color: yellow;
    }
    .box-brown {
        background-color: brown;
    }
    .box-aqua {
        background-color: aqua;
    }
    .box-orange {
        background-color: orange;
    }
    .box-silver {
        background-color: silver;
    }
    </style>
  </head>
  <body>
        <div class="boxes">
            <div class="box box-big box-red"></div>
            <div class="box box-small box-blue"></div>
            <div class="box box-small box-green"></div>
            <div class="box box-small box-black"></div>
            <div class="box box-small box-yellow"></div>
            <div class="box box-small box-brown"></div>
            <div class="box box-small box-aqua"></div>
            <div class="box box-small box-orange"></div>
            <div class="box box-small box-silver"></div>
        </div>
        <hr/>
        <div class="boxes">
            <div class="box box-small box-red"></div>
            <div class="box box-small box-blue"></div>
            <div class="box box-small box-green"></div>
            <div class="box box-small box-brown"></div>
            <div class="box box-small box-aqua"></div>
            <div class="box box-small box-orange"></div>
            <div class="box box-small box-red"></div>
            <div class="box box-small box-blue"></div>
            <div class="box box-small box-green"></div>
            <div class="box box-small box-brown"></div>
            <div class="box box-small box-aqua"></div>
            <div class="box box-small box-orange"></div>
        </div>
        <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script>
        (function(){
            var boxSizing = function(){
                $(".box").each(function(){
                    var $this = $(this),
                            thisWidth = $this.css("width"),
                            borderWidth = (10/700 * parseInt($(".boxes").css("width"))) + "px";
                    console.log(borderWidth);
                    $this.css({"height":thisWidth, "border-width":"0 " + borderWidth + " " + borderWidth + " 0"});
                });
            }
            $(window).resize(boxSizing);
            boxSizing();
        })();
        </script>
  </body>
</html>