小编Hid*_*bes的帖子
你能用CSS定位<br />吗？
是否可以<br/>使用CSS 定位换行符？
每次有一个换行符时我想要一条1px的虚线.我使用自己的CSS自定义网站,无法更改设置的HTML,否则我会使用其他方式.
我不认为这是可能的,但也许有人知道的方式.
推荐指数
解决办法
查看次数
短语内容和流内容之间有什么区别？
我是HTML和CSS的新手,我想知道流内容和短语内容之间的区别.除了W3官方文档之外,MDN文档也很有用,并说明:
流内容定义如下:
属于流内容类别的元素通常包含文本或嵌入内容.
短语内容定义如下:
短语内容定义文本及其包含的标记.短语内容的运行构成段落.
但是,文档在两者之间给出的差异很小,有人可以澄清措辞内容和流内容之间的主要区别吗？
推荐指数
解决办法
查看次数
每个项目的宽度与最宽的元素相同
我想创建这个布局:
当项目不适合容器时,我们可以移动到下一行:
当容器比较宽的项目小时,我们可以将内容包装在多行中
使用Javascript非常简单,这里是https://jsfiddle.net/oucxsep4/的示例.
var choices = document.querySelectorAll('li');
var maxWidth = 0;
// read
for (i = 0; i < choices.length; ++i) {
maxWidth = Math.max(maxWidth, choices[i].offsetWidth)
};
// write
for (i = 0; i < choices.length; ++i) {
choices[i].style.width = maxWidth + "px";
};ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
background: red;
float: left;
margin: 5px;
}<ul>
<li>first choice</li>
<li>choice</li>
<li>This is the wider choice</li>
<li>other choice</li>
</ul>是否可以不使用Javascript而只使用CSS？我试过flexbox没有成功.
推荐指数
解决办法
查看次数
转换绝对布局以使用浮动
我正在寻找关于我正在进行的项目的一些建议,并会感谢任何帮助.
目标:
制作拖放CMS,允许用户在网格上绘制元素并将其移动到所需位置.更改以JSON格式记录,并在用户按下发布按钮时转换为HTML/CSS.生成的HTML应该是干净和灵活的(即适应高度/长度不同的内容).系统应该能够处理创建电子商务站点以及简单的信息站点.
问题:
在HTML中实现拖放系统的逻辑方法是使用absoluteset widths和heights进行定位; 由于内容可能具有可变长度,并且由于绝对定位的元素从文档流中取出而不知道它们周围的元素,因此该方法不适合于完成的站点.
解:
创建一个系统,将绝对定位的元素转换为浮动元素.
例:
在CMS系统中,用户通过在网格上绘制框来创建以下布局:
- 固定高度的标头
- 可变高度的导航
- 固定高度的图像
- 可变高度页面的主要内容
- 可变高度的访问项目列表
- 固定高度的页脚
绝对布局:
HTML/CSS将是这样的:
body {
background-color: #999999;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
margin: 15px 0;
padding: 0;
}
#mainContainer {
background-color: #FFFFFF;
height: 500px;
margin: 0 auto;
position: relative;
width: 916px;
}
.contentBlock {
border: 1px solid orange;
box-sizing: border-box;
color: orange;
font-size: 2em;
text-align: center;
}
.contentBlock:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle; …推荐指数
解决办法
查看次数
使用stop()延迟()或超时？
$('.file a').live('mouseenter', function() {
$('#download').stop(true, true).fadeIn('fast');
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
我希望mouseenter函数有stop()1秒的延迟.所以,如果我将鼠标悬停在#download该fadeIn应延迟1秒后启动.如果我同时将鼠标移出,fadeIn则不应该开始.抓住我？
我真的不知道怎么做,有什么想法吗？
推荐指数
解决办法
查看次数
如何检查光标是否在元素上？
如何div使用JQuery/Javascript 检查光标是否在html页面上？
我正在尝试获取光标坐标以查看它们是否在我元素的矩形中.也许有预定义的方法？
UPD,不要说任何关于hover事件等等.我需要一些方法,它会返回页面上某些元素的true/false,如:
var result = underElement('#someDiv'); // true/false
推荐指数
解决办法
查看次数
李项目两行.第二行没有保证金
我目前正在处理一个无序列表,其中包含带有标语的列表项.我有一个关于一个列表项的问题,这个问题很长,足以占用两行(见图)
我想要它,以便第二行与第一行对齐.这是我正在使用的HTML代码.我使用fontAwesome作为检查图像.
ul {
width: 300px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>我已经尝试 在"2"和"行"之间输入多个,但这对我来说似乎是一个非常糟糕的做法.我希望有人可以帮我解决这个问题.
推荐指数
解决办法
查看次数
没有文本的内联块元素呈现方式不同
<div style="background-color:red">
<div style="display:inline-block;background-color:green;height:20px;width:20px;"></div>
</div>
<div style="background-color:yellow">
<div style="display:inline-block;background-color:green;height:20px;width:20px;">hi</div>
</div>在FF或Chrome中渲染时,红色div的高度为26px,而黄色div的高度为20px.如何使红色div渲染与黄色div相同,但不包含任何文本？
推荐指数
解决办法
查看次数
水平图像响应图像的叠加
我正在尝试在水平图库中为响应式图像创建叠加层.叠加div在li具有position和大z-index值,但仍显示在图像的背景.当我尝试为absolute更高z-index的图像做图像时水平滚动失败.
看演示:Jsfiddle
html,
body {
min-height: 100%;
height: 100%;
}
body {
width: 100%;
margin: 0;
padding: 0;
}
#thumbsList {
height: 76%;
white-space: nowrap;
margin: 0;
padding: 0;
line-height: 0px;
top: 13%;
left: 80px;
list-style-type: none;
top: 13%;
position: absolute;
}
#thumbsList li {
display: inline;
position: relative;
}
#thumbsList li img {
max-width: 100%;
height: 100%;
transition: all 0.8s ease;
}
.Absolute-Center {
margin: auto; …推荐指数
解决办法
查看次数
chrome与firefox的z-index行为不同
我有一堆CSS应用于父元素及其子元素:
.parent {
position: fixed;
top: 0px;
}
.el {
position: fixed;
top: 5px;
z-index: 100;
}
.bodycontent {
z-index: 1;
position: relative;
}<div class="parent">
<div class="el">
<button></button>
</div>
</div>
<div class="bodycontent"></div>页面是这样生成的,当它滚动时,.parent会在下面.bodycontent但是.el在它上面.这适用于我希望它在Firefox中,但不适用于Chrome.
有什么建议？我尝试过使用不同的z-index值和不同的position值而没有成功.
推荐指数
解决办法
查看次数
标签 统计
css ×8
html ×7
javascript ×3
jquery ×3
css-float ×1
css3 ×1
delay ×1
firefox ×1
flexbox ×1
font-awesome ×1
hover ×1
html-lists ×1
line-breaks ×1