相关疑难解决方法(0)
如何设计div作为响应方块？
我希望我的div能够调整其高度以始终等于其宽度.宽度是百分比.当父级的宽度减小时,框应该通过保持其宽高比来减少.
怎么做是CSS？
推荐指数
解决办法
查看次数
CSS流体布局:基于百分比的margin-top在容器宽度增加时增长
我只是学习CSS流体布局和响应式设计,我试图在布局中使用没有px值的所有百分比值.
到目前为止似乎有效,但在一个地方,我看到了一些我没想到的东西.我试图在两个垂直堆叠的div之间放置一个边距,这个div根据容器的高度而变化.当我垂直调整窗口大小时,我希望边距会改变,但如果你水平调整它,它也会增长,这是我不想要的.我错过了什么？
这是一个小提琴.感谢您的帮助.
推荐指数
解决办法
查看次数
强制自举响应图像为方形
图像是在循环中创建的:
<div id="row">
<div class="col-sm-6">
<div id="row">
<?php
foreach ($products as $product)
{
?>
<div class="col-sm-6">
<a href="/admin/product/" class="thumbnail">
<div class="caption">
title<br>
10 x viewed
</div>
<img src="/assets/img/product/<?php echo $product['img'] ?>" class="img img-responsive full-width" />
</a>
</div>
<?php
}
?>
</div>
</div>
</div>
图像来自不同的尺寸,有些高于宽度,有些比高度宽.如何在响应时强制所有图像与高度相同.他们可以拥有widh:100%,但我不能使用身高:自动,比率将保持不变.我应该怎么做才能使我的图像在响应时平方,我不知道%.
例如,绿色衬衫不如他的宽度高
我想这样做没有jquery所以只有CSS!
推荐指数
解决办法
查看次数
保证金顶部:100%获得父宽度值...奇怪
在大多数浏览器(即ff,chrome,safari)上,我有一个非常奇怪的"问题".这是示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html{
outline: 1px #0ff solid;
background: rgba(0,255,255,0.1);
}
body{
margin: 0;
padding: 0;
outline: 1px #00f solid;
background: rgba(0,0,255,0.1);
}
#aDiv{
width: 300px;
outline: 1px #f00 solid;
background: rgba(255,0,0,0.2);
}
#bDiv{
margin-top: 100%;
outline: 1px #0f0 solid;
background: rgba(0,255,0,0.1);
}
</style>
</head>
<body>
<div id="aDiv">
<div id="bDiv">
content
</div>
</div>
</body>
</html>
当您更改#aDiv宽度时,#bDiv margin-top将更改为相同的值.我不知道它是如何可能的,高度是宽度.无论如何,也许你可以解释一下我发生了什么？
最好的祝福 ;)
D.
推荐指数
解决办法
查看次数
CSS - 保证金最高50%超过50%
我想要一个通过百分比的操作边缘的子div.y位置应为父div的50%.但它在某种程度上更多.为什么不是50%？
HTML
<div class="content">
<header></header>
</div>
CSS
.content {
width: 300px;
height: 200px;
background: blue;
position: relative;
clear: both;
}
.content header {
width: 100px;
height: 100px;
margin-top: 50%;
background: red;
position: relative;
float: left;
}
推荐指数
解决办法
查看次数
padding-top: 100% 是如何工作的？
我有以下代码：
.parent {
width: 30%;
border: 1px dotted red;
}
.child {
padding-top: 100%;
border: 1px solid black;
} <div class="parent">
<div class="child"></div>
</div>出于某种原因，孩子变成了一个完美的正方形。这至少很奇怪，因为没有一个 div 有任何分配给它们的高度。为什么会这样？
有什么作用padding-top: 100%？
推荐指数
解决办法
查看次数
如何使用JavaScript设置动态CSS值
我希望div在我的页面上有响应填充.它应该是height变量中的五分之一cover_height.
到目前为止,这是我的方法,这是对这个问题的回答,但它没有改变padding-top:
var cover = document.getElementById("cover");
var cover_height = cover.height;
cover.style["padding-top"] = cover_height / 5 + "px";
任何关于代码的反馈都是受欢迎的,因为我对JS很新.
推荐指数
解决办法
查看次数
标签 统计
css ×7
html ×3
aspect-ratio ×1
css3 ×1
fluid-layout ×1
height ×1
javascript ×1
layout ×1
margin ×1
width ×1