相关疑难解决方法(0)
使用CSS保持div的宽高比
我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.
是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？
我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.
推荐指数
解决办法
查看次数
透明图像可能的最小数据URI图像
我正在使用带有背景图像的透明1x1图像,以便能够使用精灵并仍然为某些图标提供替代文本.
我想为图像使用数据URI来减少HTTP请求的数量,但是生成透明图像的最小可能字符串是什么？
我意识到我可以使用数据URI:s来表示实际图像而不是精灵,但是当所有内容都保存在CSS中而不是分散时,它更容易维护.
推荐指数
解决办法
查看次数
我可以根据基于百分比的宽度设置div的高度吗？
假设我有一个宽度为身体宽度50%的div.如何使其高度等于该值？因此,当浏览器窗口宽度为1000px时,div的高度和宽度均为500px.
推荐指数
解决办法
查看次数
防止CSS网格中的双边框
鉴于当前的CSS网格示例,我如何折叠边框以避免双边框？
使用Html表实现这是一件非常简单的事情.我该怎么做display: grid？
.wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
.wrapper > div {
padding: 15px;
text-align: center;
border: 1px solid black;
}<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>推荐指数
解决办法
查看次数
为什么vw包含滚动条作为视口的一部分？
我正在尝试建立一个有很多宽度和高度相同的盒子的网站.例如,我有一个页面,它有两个相同大小的框并排.
简单的解决方案是将宽度和高度设置为50vw.这有效,直到有一个滚动条.我用Google搜索了几个小时,无法理解为什么在地球上vw和vh会将滚动条包含在视口中.
这是我的问题的一个例子
HTML
<div class="container">
<div class="box red"></div>
<div class="box green"></div>
</div>
<div class="lotta-content"></div>
CSS
body {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
}
.box {
float: left;
width: 50vw;
height: 50vw;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.lotta-content {
height: 10000px;
}
注意不需要的水平滚动条
https://jsfiddle.net/3z887swo/
一种可能的解决方案是使用宽度的百分比,但是使用高度的vw,但它不会是一个完美的盒子,这不是世界上最糟糕的东西,但仍然不理想.这是一个样本
https://jsfiddle.net/3z887swo/1/
有谁知道为什么vw/vh包含滚动条作为视口的一部分？此外,如果某人有比我自己更好的解决方案,我很乐意听到.我正在寻找一个纯CSS解决方案.我宁愿没有javascript.
推荐指数
解决办法
查看次数
根据高度设置宽度
我根据宽度看到高度的解决方案:css高度与宽度相同.或者在这里:https://stackoverflow.com/a/6615994/2256981.但我的问题恰恰相反.
我的元素:
<body>
<div id="square"></div>
</body>
风格:
body, html {
margin: 0;
height: 100%;
min-height: 300px;
position: relative;
}
div#square { /* My square. */
height: 75%; /* It's height depends on ancestor's height. */
width: 75vh; /* If supported, preliminarily sets it's width. */
position: absolute; /* Centers it. */
left: 50%; top: 50%; transform: translate(-50%, -50%);
background-color: darkorange; /* Makes it visible. */
}
脚本,保持正方形:
window.onload = window.onresize = function (event) { …推荐指数
解决办法
查看次数
CSS:保持宽高比而不会溢出内容
我正在使用CSS,我想创建一个具有一定比率的盒子,无论盒子的大小如何都要保留.但是如果有更多内容,我希望盒子能够增长.
按顺序总结:
- 仅限CSS (如果可能)
- 保留给定的宽高比
- 如果有更多内容(比率)允许框增长
在那些我迄今为止尝试过的技术中,盒子的内容无法使盒子增长.相反,我唯一的选择是重叠或剪裁内容.
第一种和第三种方法占据了包装器内部的空间,并且使用绝对位置将内容置于其上方.由于内容是绝对定位的,因此将其从文档流中删除.因此,它无法扩展包裹元素.
第二种选择是使用固定高度,这也不允许内容超出它.
* {margin: 0; padding: 0;}
div{
width: 50vmin; height: 50vmin;
font-size: 30px;
background: #ccc;
margin: auto;
padding: 3%;
}<div>
<p>If you scale your window, you will see that the text does not fit into the box at some point, and therefore the text will be overlapping the box.<p>
</div>我部分测试的其他方法:
- 物体定位
- Flexbox的
据我所知,Object-Fit仅影响被替换的元素.我无法通过此属性对我的div/p元素产生任何影响.
Flexbox对我的场景也不实用.根据我目前的知识水平,flexbox在这方面没有帮助.因为它主要是关于建立多个项目之间的关系.但我不确定.也许flexbox中有一些我还没有意识到的东西.
推荐指数
解决办法
查看次数
响应式调整父级中的 HTML div 大小，包括信箱和邮筒，仅限 CSS
推荐指数
解决办法
查看次数