标签: css3
禁用LESS-CSS覆盖calc()
现在我在我的LESS代码中尝试在CSS3中执行此操作:
width: calc(100% - 200px);
但是,当LESS编译时,它输出:
width: calc(-100%);
有没有办法告诉LESS不要以这种方式编译并正常输出？
推荐指数
解决办法
查看次数
如何在元素的一侧添加框阴影？
我需要在某个block元素上创建一个box-shadow ,但仅在(例如)右侧.我做的方式是包装内部元件box-shadow到外层一个padding-right和overflow:hidden;这样的阴影其他三面是不可见的.
有没有更好的方法来实现这一目标？喜欢box-shadow-right？
编辑:我的意图是只创建阴影的垂直部分.repeat-y与规则的作用完全相同background:url(shadow.png) 100% 0% repeat-y.
推荐指数
解决办法
查看次数
如何为同一字体添加多个字体文件？
我正在查看@ font-face CSS规则的MDC页面,但我没有得到一件事.我有单独的文件粗体,斜体和粗体+斜体.如何将所有三个文件嵌入一个@font-face规则中？例如,如果我有:
@font-face {
font-family: "DejaVu Sans";
src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
font-family: "DejaVu Sans";
font-weight: bold;
}
浏览器将不知道哪个字体用于粗体(因为该文件是DejaVuSansBold.ttf),因此它将默认为我可能不想要的东西.如何告诉浏览器我对某种字体的所有不同变体？
推荐指数
解决办法
查看次数
如何将两个并排的div保持相同的高度？
我有两个div并排.我希望它们的高度相同,并且如果其中一个调整大小,则保持不变.虽然我无法想象这一点.想法？
为了澄清我令人困惑的问题,我希望两个盒子总是大小相同,所以如果因为文本被放入其中而增长,那么另一个应该增长以匹配高度.
<div style="overflow: hidden">
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!
</div>
</div>推荐指数
解决办法
查看次数
在身体上设置的CSS3渐变背景不会拉伸,而是重复？
好吧说内容<body>总计300px高.
如果我设置我的<body>使用-webkit-gradient或背景-moz-linear-gradient
然后我最大化我的窗口(或者只是让它高于300px)渐变将正好是300px高(内容的高度),并重复填充窗口的其余部分.
我假设这不是一个bug,因为它在webkit和gecko中是相同的.
但有没有办法让渐变拉伸填充窗口而不是重复？
推荐指数
解决办法
查看次数
如何使div填充剩余的水平空间？
我有2个div:一个在左侧,一个在我的页面右侧.左侧的那个有固定的宽度,我希望右侧的一个填充剩余的空间.
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}<div id="search">Text</div>
<div id="navigation">Navigation</div>推荐指数
解决办法
查看次数
如何让flexbox儿童100%的父母身高？
我正在尝试填充flexbox内的flex项目的垂直空间.
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: row;
}
.flex-1 {
width: 100px;
background-color: blue;
}
.flex-2 {
position: relative;
flex: 1;
background-color: red;
}
.flex-2-child {
height: 100%;
width: 100%;
background-color: green;
}<div class="container">
<div class="flex-1"></div>
<div class="flex-2">
<div class="flex-2-child"></div>
</div>
</div>这是JSFiddle
flex-2-child 没有填写所需的高度,除非在以下两种情况下:
flex-2高度为100%(这很奇怪,因为弹性项目默认为100%+ Chrome中存在错误)flex-2-child有一个绝对的位置也很不方便
这在目前的Chrome或Firefox中不起作用.
推荐指数
解决办法
查看次数
宽度为100%的HTML表格,在tbody中有垂直滚动
如何设置<table>100%宽度并仅在<tbody>垂直滚动内放置一些高度？
table {
width: 100%;
display:block;
}
thead {
display: inline-block;
width: 100%;
height: 20px;
}
tbody {
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>我希望避免增加一些额外的div,我要的是简单的表像这样,当我试图改变显示table-layout,position在CSS表以及更多的东西没有工作好与100%的宽度仅与PX固定宽度.
推荐指数
解决办法
查看次数
使用CSS在背景图像上设置大小？
是否可以使用CSS设置背景图像的大小？
我想做的事情如下:
background: url('bg.gif') top repeat-y;
background-size: 490px;
但似乎这样做是完全错误的......
推荐指数
解决办法
查看次数
如何从css换行,不使用<br />？
输出:
你好
,你好吗？
码:
<p>hello <br> How are you </p>
如何实现相同的输出<br>？
推荐指数
解决办法
查看次数
标签 统计
css ×10
css3 ×10
html ×4
flexbox ×2
box-shadow ×1
css-calc ×1
font-face ×1
fonts ×1
gradient ×1
html-table ×1
less ×1
responsive ×1
shadow ×1
width ×1