相关疑难解决方法(0)
推荐指数
解决办法
查看次数
边界没有显示
你知道为什么蓝色边框没有显示在我的场地的右侧吗？(字段宽度为100%)非常感谢http://jsfiddle.net/KtEdG/
CSS:
.wrapper {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 1000px;
overflow: hidden;
}
.block {
padding: 20px;
background-clip: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
overflow-y: auto;
overflow-x: hidden;
}
.block-left {
float: left;
box-sizing: border-box;
overflow: hidden;
width: 50%;
}
.block-right {
float: right;
overflow: hidden;
box-sizing: border-box;
width: 50%;
}
/*************************************************************
* CONTACT …推荐指数
解决办法
查看次数
使用position:absolute,同时将其保留在文档流中
这是我正在构建的页面的屏幕截图.我正在努力确保绿色按钮始终位于容器的底部.这是一段代码:
HTML
<div class="list-product-pat">
<article>
<!-- title, image, spec ... -->
<div class="pricing-pat">
<!-- the button goes here -->
</div>
</article>
</div>
CSS
.list-product-pat article {
position: relative;
min-height: 260px;
}
.list-product-pat .pricing-pat {
position: absolute;
bottom: 0;
width: 100%;
}
到目前为止没有问题......直到产品规格变得太长并且它突破了绿色按钮.
我想将绿色按钮保持在最底部位置,但同时如果产品标题/产品规格太长,我也希望高度延长.
在理想的世界中,它应该是这样的:
所以我的想法是保持绝对定位,同时仍然保持在文档流程中(因此产品规格知道绿色按钮在那里并且没有突破它).
如果规格高度太长,我只需要扩展它.换句话说,如果规格处于正常高度,则不会延伸.我想避免规格和绿色按钮之间的奇怪差距.
有什么想法怎么做？
这是一个小提琴,看看我是如何做到的: http ://jsfiddle.net/xaliber/xrb5U/
推荐指数
解决办法
查看次数
如何将面板标题中的文本与拉到右侧的按钮对齐
我在bootstrap中创建了一个面板标题,并尝试将其文本居中,同时有一个按钮,该按钮应该与文本位于同一水平轴上但在右侧拉出但我的输出是:
- 该按钮未与文本水平对齐
- 文本位于标题左侧和按钮左侧的中心,而不是在标题的左侧和右侧之间居中
这是我的代码:
<div class='container'>
<div class='panel panel-default'>
<div class='panel-heading'>
<div class='panel-heading text-center'>
<h4>Present Schedule<button class='btn pull-right btn-danger' onclick="location.href='past_sched.php'">Go to Past Schedule</button></h4>
</div>
</div>
</div>
</div>
这是结果的一个小问题:https://jsfiddle.net/63c0wn66/3/
推荐指数
解决办法
查看次数
CSS定位和CSS边距之间的区别
今天我在CSS中学习了2个概念,一个是CSS定位(静态,相对,绝对,固定),另一个是CSS Margin,它定义了元素之间的空间.
假设我想移动一个元素,这是最好的方法吗？因为这两个概念似乎都可以做同样的事情.一个例子可能如下:
代码(CSS定位):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Haha</title>
<style type="text/css">
//Using CSS positioning
h2{position:relative;top:-80px}
</style>
</head>
<body>
<h1>hahahaha</h1>
<h2>hehehehe</h2>
</body>
</html>
守则(CSS保证金):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Haha</title>
<style type="text/css">
//Using CSS Margin
h2{margin-top:-80px}
</style>
</head>
<body>
<h1>hahahaha</h1>
<h2>hehehehe</h2>
</body>
</html>
问题:
1.)正如你所看到的,通过将第二个标题移动到第一个标题的顶部,上面的2个代码做了同样的事情.所以我只是想知道哪种方法实际上是排列元素的正确方法？
推荐指数
解决办法
查看次数
为什么使用绝对位置会导致 div 位于顶部？
请看下面这个非常简单的片段来说明我的问题：
\n\n#container {\r\n position: relative;\r\n padding: 20px;\r\n border: 2px solid gray;\r\n}\r\n\r\n#back {\r\n position: absolute;\r\n top: 0;\r\n bottom: 50%;\r\n left: 0;\r\n right: 0;\r\n background-color: #bbb;\r\n}<div class="col-sm-12" id="container">\r\n <div id="back"></div>\r\n <h1>Some Text</h1>\r\n</div>在 HTML 代码中，标记h1位于元素之后。back
由于我没有改变它的position属性，所以它一定是static。\n而且，据我所知，static元素是根据页面的流程定位的。
那么\xe2\x80\xa6 为什么绝对定位div 显示在其同级之上h1？
我期待在后面看到它，h1因为它是第一位的。
请注意，我知道如何纠正这种行为，我只是问为什么！
\n\n带有更正的片段：
\n\n#container {\r\n position: relative;\r\n padding: …推荐指数
解决办法
查看次数