相关疑难解决方法(0)
CSS三角形如何工作？
在CSS Tricks上有很多不同的CSS形状- CSS的形状,我特别对三角形感到困惑:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}<div id="triangle-up"></div>它是如何以及为什么有效？
推荐指数
解决办法
查看次数
使用CSS保持div的宽高比
我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.
是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？
我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.
推荐指数
解决办法
查看次数
根据宽度和高度保持纵横比
可以div在视口中放置一个正方形并使其居中,并始终根据宽度和高度保持其纵横比？
要求 :
- 只有CSS
- 无论视口的方向(横向或纵向)如何,方块的大小都必须适应视口的最小尺寸(宽度或高度).
- 正方形必须在视口中以水平方向和垂直方向居中
例:
推荐指数
解决办法
查看次数
为什么div和旋转div(三角形)之间存在差距
我试图在我的移动应用程序的HTML/CSS中做这个形状:https: //embed.plnkr.co/9k8jbJyzUiSMSoSHlOti/
.boundary {
width: 100.13723%;
padding-bottom: 5.24078%;
position: relative;
overflow: hidden;
background-color: white;
}
.boundary:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: top left;
transform: rotate(3deg);
background-color: green;
}
.inner {
height: 100%;
width: 100%;
background-color: green;
}<div class="boundary"></div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris …推荐指数
解决办法
查看次数
根据宽度计算div的高度并保持比例
我正在寻找一种纯CSS解决方案，以解决我在这里使用jQuery所提供的帮助。
基本上，我有3个div，它们在容器中的宽度均匀分布。它们保持3/4的比例，高度是根据宽度计算得出的。此外，每个div都有一个与背景成比例的背景图像以及一些水平和垂直居中的文本。
$(document).ready(function() {
function setw() {
var footdivwidth = $('footer div').width();
var footdivheight = footdivwidth * .75;
$('footer div').css({
'height': footdivheight + 'px'
});
$('footer div span').html('w: ' + footdivwidth + '<br>h: ' + footdivheight);
}
setw();
$(window).resize(function() {
setw();
})
});FOOTER {
max-width: 1000px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.171);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
FOOTER DIV {
background-image: url('https://learnwebdesign.online/img/bg.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
flex: 1;
text-align: center;
display: flex;
align-items: …推荐指数
解决办法
查看次数
根据高度设置宽度
我根据宽度看到高度的解决方案: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流体布局)
但我想要更多!! 我想要一个灵活的容器,它总是具有正方形的纵横比,但最大高度和最大宽度为100%的页面(窗口元素),并且在其顶部始终垂直和水平居中.
像这样:
// Container matches height of the window
// container-height = 100%; container-width = absolute-container-height
-page/browser-window-
- ####### -
- #cont-# -
- #ainer# -
- ####### -
---------------------
// container matches width of the window
// container-width = 100%; container-height = absolute-container-width
--page---
- -
- -
-#######-
-#######-
-#######-
-#######-
- -
- -
---------
是否有可能用纯css(甚至更好的跨浏览器)实现这一点？
编辑: 我知道css3 有calc(),但由于移动浏览器支持不佳,我不想使用它.
编辑2: 似乎,我没有让自己清楚.我需要包装器的高度和宽度来匹配窗口的高度或宽度,具体取决于哪个更小.方形容器不应超过窗口高度/宽度的较小值.
这就是如何用jQuery完成的:
// container/#main-wrapper has top: 50%, left: 50%, position: …推荐指数
解决办法
查看次数
如何用css使高度等于宽度
如何用css使高度等于宽度.
我有这样的HTML:
<div style="width:900px;height:200px;">
<a style="display:block; float:left; width:35%; background:green"></a>
</div>
现在,我想使a元素的高度等于宽度(35%).我怎样才能做到这一点？谢谢你的帮助.
推荐指数
解决办法
查看次数
CSS宽度与高度相同
我想在我的css文件中做下一个技巧，以便（高度=宽度）不设置像素。我想这样做，以便无论浏览器的分辨率如何，在这两个维度上都具有相同的值。
#test{
height: 100%;
width: (same as height);
}
我更喜欢使用CSS而不是JavaScript。
先感谢您。
推荐指数
解决办法
查看次数
CSS - 根据宽度设置高度
我可以在 CSS 中使用宽度设置高度吗？这就是我现在所拥有的：
width: 22.5%;
height: width*2.25;
background: #fff url("images/image_bg.png");
background-repeat: no-repeat;
background-size: cover;
border: 0.5px solid #ddd;
div 的宽度始终相同，但高度有非常细微的差异，这使得它们的背景不合适。如果我可以将高度设置为与宽度成比例，那就完美了。
推荐指数
解决办法
查看次数
标签 统计
css ×9
html ×6
css3 ×4
aspect-ratio ×3
javascript ×2
css-shapes ×1
geometry ×1
height ×1
html5 ×1
polygon ×1
rectangles ×1
responsive ×1
rotation ×1