我正在使用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它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.
我试图给一个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的文本是相互重叠的.这只是一个例子,所以这并不重要.
我这里有两个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)之间留出空间?
我正在尝试使用CSS创建一个圆圈,它看起来与下图完全相同:

......只有一个div:
<div class="myCircle"></div>
Run Code Online (Sandbox Code Playgroud)
并仅使用CSS定义.没有SVG,WebGL,DirectX,[...]允许.
我试图绘制一个完整的圆圈并将其中的一半淡化为另一个div,它确实有效,但我正在寻找更优雅的替代方案.
在我的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旁边应用所有.
最近我在Chrome浏览器上登录了我的FB帐户.当我打开开发人员工具时,我看到了这样的事情:

现在我知道可以使用javascript console.log函数向控制台添加任何内容.但我的问题是 - 他们是如何为文本添加风格的?例如"停止!" 是用红色tahoma字体写的,黑色边框和更大的尺寸.他们是如何做到的呢?
我正在使用<pre>标签显示预先格式化的文本(包括换行符,空格和制表符等).但是没有换行符的大行显示在一行中,并添加了滚动条.
我想限制<pre>标签的宽度(这样大的线条就会分解成新的线条而不需要滚动.这可能或者是否有其他标签我可以使用?
代码是这样的:
$.post("contr.php", q1, function(data) {
$("#el_text").html("< pre>"+data+"< /pre>");
});
Run Code Online (Sandbox Code Playgroud) 我试图使用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.
我正在尝试将图像(加号)旋转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 ×10
html ×7
css3 ×3
console.log ×1
css-shapes ×1
css-tables ×1
javascript ×1
jquery ×1
popover ×1
rotation ×1
size ×1
tags ×1
transition ×1