标签: css

特别是在Firefox中,我遇到了一个我无法弄清楚如何修复的问题.

在下一页上,向下滚动页面时会跳转几次 - 主要是在较小的屏幕上,页面没有显示其完整大小.您可以通过使浏览器小于页面来复制此问题,因此您必须滚动.

它在这个页面上:http://www.nucanoe.com/frontier-accessories/

如果我position:fixed在导航选择器上禁用它,它会解决问题 - 但我们需要导航是粘性的.有解决方案来解决这个问题吗？我想我们可能需要以某种方式使用jQuery.

提前致谢!

如标题中所述,我如何自定义这些元素？它们似乎使用透明背景,这在大多数背景调色板上很难查看

我正在努力确定DOM中元素的当前位置和大小.我已经整理了一个片段来说明屏幕右侧的基于卡片的系统.

我正在尝试构建的行为是,当您单击其中一张卡时,将添加另一张卡(最终位于下方,但现在位于顶部),它将飞到屏幕的左上角,然后再填充可用空间.

d3.selectAll("attribute-card").on("click", function (d) {

   var rect = this.getBoundingClientRect();
   var card = d3.select("body")
          .append("div")
            .attr("class", "card")
            .style("background", "transparent")
            .style("border", "thin solid red")
            .style("left", rect.left + "px")
            .style("top", rect.top + "px")
            .style("width", (rect.right - rect.left) + "px")
            .style("height", (rect.bottom - rect.top) + "px")
            .style("position", "absolute");
});

html {
  height: 100%;
  margin: 0;
  font-family: Arial;
  overflow: hidden;
}
body {
  height: 100%;
}
svg {
  background: #2c272b;
  width: 100%;
  height: 100%;
}
.radial-menu .segment {
  fill: #3b3944;
}
.radial-menu .segment:hover { …

我正在攻读HTML,CSS,JS考试,并找到了各种资源来帮助我学习.在做练习测验时,我发现了一个关于tr行CSS选择器的问题:

测验告诉我选项B是正确的.

根据我的研究,没有[line | -0,1,3]选择器语法.

我想验证这个语法是否正确,或者我是否正确地说这是测验部分的错误.

我在codepen.io编辑器中测试了这个,它也不起作用,可以在这里找到:http://codepen.io/anon/pen/dPwwpB？editors = 110

tr [line |- 0,1,3] {
  background-color: blue;
}

最后,如果此语法不正确,您还可以确认正确的语法吗？(为清楚起见,HTML从此帖中排除,但可在Codepen链接上找到)

我在CSS方面非常精通,但今天我偶然发现了一个令我头疼的片段(这里和这里).

我从来不认为我们可以通过中心绝对定位的元素margin: 0 auto,但鉴于问题的元素有一组宽度,还有的left: 0和right: 0,它实际上似乎工作:

#parent
{
    background: #999;
    height: 300px;
    position: relative;
    width: 300px;
}

#child
{
    background: #333;
    height: 50px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 50px;
}

<div id="parent">
    <div id="child"></div>
</div>

(JSFiddle)

我一直以为left: 0和right: 0将决定元素的宽度(它100%的第一个相对定位的父),但似乎width这里的优先级,因此使得margin: 0 auto工作.

这是定义的行为吗？我可以在任何规格中找到它的相关信息吗？我google了一下,但没有任何用处.

我有一个RMarkdown文档输出到HTML格式与下面的例子相同.我应该添加什么来为每个绘图输出应用唯一的CSS ID或类？

---
title: "RMarkdown"
author: "Me"
date: "Friday, March 27, 2015"
output:
  html_document:
    theme: null
    css: style.css
---

```{r plot1, echo=FALSE, warning=FALSE, message=FALSE}
library(ggplot2)
x <- ggplot(some_r_code)
print(x)
```

```{r plot2, echo=FALSE, warning=FALSE, message=FALSE}
y <- ggplot(some_more_r_code)
print(y)
```

我已经阅读了http://rmarkdown.rstudio.com/html_document_format.html上的信息页面,它找到了回答这个问题的方法,但没有让我在那里.我有一个类似的问题,在它的评论部分引用该页面中的材料,并希望得到答案.

谢谢!

我FontAwesome在响应式Bootstrap网站中使用图标,并希望根据屏幕分辨率显示不同大小的图标.

理想情况下,我想使用容器宽度的百分比显示字体真棒图标,即宽度的50%,因此它们可以向上和向下缩放.我知道我可能只是使用svg图标,但我想使用FontAwesome,因为我在我的网站的其他地方使用它.

我知道你可以使用类来指定大小,即fa-lg或fa-2x.最好的解决方案是使用Bootstrap类来隐藏和显示各种大小,具体取决于屏幕分辨率,还是可以使用百分比自动缩放图标？

我正在尝试建立一个有很多宽度和高度相同的盒子的网站.例如,我有一个页面,它有两个相同大小的框并排.

简单的解决方案是将宽度和高度设置为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.

问题是在IE10中,行内列的宽度计算错误,它似乎是在列边距的宽度上增加(总共80px),但在Firefox和Chrome中它完美地计算它并适合一切在1260px内.主要的问题是,我已经以我认为正确的方式对所有内容进行了前缀,但我仍然遇到了问题.

你可以在jsFiddle上看到它 - http://jsfiddle.net/andyjh07/ue2zfga6/

CSS:

.row {
  width: 100%;
  position: relative;
  background: red;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  margin-bottom: 40px; }

  .row:after {
    content: "";
    display: table;
    clear: both; }

  .row *[class^="col-"] {
    position: relative;
    display: block;
    height: auto; }

    .row *[class^="col-"]:first-child {
      margin-left: 0; }
  @media (min-width: 64em) {
    .row {
      box-orient: horizontal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      flex-direction: row;
      -ms-flex-direction: row; } }
  @media …

我有一个有一些CSS的图像: width:100%;

现在图像560px很高,但我希望只选择300px的图像,切断图像的顶部和底部而不会挤压它.

是否有可能做到这一点？

我已经看了crop但你必须选择要执行此操作的部分,因此在尝试获得中间时它将无法工作.