小编Has*_*ami的帖子

与Bootstrap 3垂直对齐

我正在使用Twitter Bootstrap 3,当我想垂直对齐时我遇到问题div,例如 - JSFiddle链接:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

Bootstrap中的网格系统float: left不使用display:inline-block,因此该属性vertical-align不起作用.我尝试使用margin-top它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.

html css css3 twitter-bootstrap twitter-bootstrap-3

860
推荐指数
16
解决办法
140万
查看次数

122
推荐指数
2
解决办法
2万
查看次数

设置相对于父div的"Position:fixed"div的宽度

我试图给一个div(位置:固定)宽度100%(与它的父div相关).但是我遇到了一些问题......

编辑: 第一个问题是通过使用继承来解决,但它仍然无法正常工作.我认为问题在于我使用了多个占用100%/继承宽度的div.您可以在jsfiddle更新中找到第二个问题:http://jsfiddle.net/4bGqF/7/

福克斯的例子

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}
Run Code Online (Sandbox Code Playgroud)

和HTML

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>
Run Code Online (Sandbox Code Playgroud)

或者你可以尝试一下:http://jsfiddle.net/4bGqF/

问题似乎是固定元素总是占用窗口/文档的宽度.有谁知道如何解决这个问题?

我不能给我的固定元素一个固定的,因为我正在使用jScrollPane插件.这取决于内容是否有滚动条.

非常感谢!

PS:2个div的文本是相互重叠的.这只是一个例子,所以这并不重要.

css jquery jquery-plugins

113
推荐指数
7
解决办法
16万
查看次数

div之间的空格 - 显示表格单元格

我这里有两个div:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>
Run Code Online (Sandbox Code Playgroud)

有没有办法在这两个div(有display:table-cell)之间留出空间?

html css css-tables

93
推荐指数
2
解决办法
13万
查看次数

CSS半圈(边框,仅限轮廓)

我正在尝试使用CSS创建一个圆圈,它看起来与下图完全相同:

在此输入图像描述

......只有一个div:

<div class="myCircle"></div>
Run Code Online (Sandbox Code Playgroud)

使用CSS定义.没有SVG,WebGL,DirectX,[...]允许.

我试图绘制一个完整的圆圈并将其中的一半淡化为另一个div,它确实有效,但我正在寻找更优雅的替代方案.

html css css-shapes

58
推荐指数
4
解决办法
9万
查看次数

CSS nth-child大于和小于

在我的HTML中,我有,

<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
..................
..................
Run Code Online (Sandbox Code Playgroud)

在上面的HTML我有这个container类.在我的CSS中,我需要添加一些样式.container:nth-child(3,4,5,6,..and so on).意味着我需要nth-child在1和2旁边应用所有.

html css css-selectors css3

55
推荐指数
2
解决办法
7万
查看次数

JavaScript - 将样式添加到控制台日志的文本中

最近我在Chrome浏览器上登录了我的FB帐户.当我打开开发人员工具时,我看到了这样的事情:

在此输入图像描述

现在我知道可以使用javascript console.log函数向控制台添加任何内容.但我的问题是 - 他们是如何为文本添加风格的?例如"停止!" 是用红色tahoma字体写的,黑色边框和更大的尺寸.他们是如何做到的呢?

javascript css console.log

43
推荐指数
1
解决办法
3万
查看次数

HTML中的<pre>标签,宽度固定

我正在使用<pre>标签显示预先格式化的文本(包括换行符,空格和制表符等).但是没有换行符的大行显示在一行中,并添加了滚动条.

我想限制<pre>标签的宽度(这样大的线条就会分解成新的线条而不需要滚动.这可能或者是否有其他标签我可以使用?

代码是这样的:

$.post("contr.php", q1, function(data) {
    $("#el_text").html("< pre>"+data+"< /pre>");
});
Run Code Online (Sandbox Code Playgroud)

html css tags

42
推荐指数
2
解决办法
2万
查看次数

更改twitter bootstrap popover的宽度

我试图使用bootstrap 3改变twitter bootstrap popover的宽度:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Run Code Online (Sandbox Code Playgroud)
$('#popover').popover(options)
Run Code Online (Sandbox Code Playgroud)

目前,弹出窗口中的内容分布在两行上.我希望popover内容保持在一行.这可能吗?

我正在使用C#,html和css.

html css popover twitter-bootstrap

40
推荐指数
3
解决办法
7万
查看次数

点击使用纯CSS进行CSS3过渡

我正在尝试将图像(加号)旋转45度以创建十字符号.到目前为止,我已经设法使用下面的代码来实现这一点,但它正在进行悬停,我想让它在点击时旋转.

使用CSS有一种简单的方法吗?

我的代码是:

CSS

img {
    display: block;
    margin: 20px;
}

.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

.crossRotate:hover {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}
Run Code Online (Sandbox Code Playgroud)

HTML

<body>
   <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>
Run Code Online (Sandbox Code Playgroud)

这是jsfiddle演示.

css transition rotation css3 css-transitions

36
推荐指数
3
解决办法
15万
查看次数