相关疑难解决方法(0)
如何使用CSS垂直居中文本？
我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.
这是我的div风格:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}<div id="box">
Lorem ipsum dolor sit
</div>做这个的最好方式是什么？
推荐指数
解决办法
查看次数
如果包含浮动元素,为什么容器元素的高度不会增加？
我想问一下高度和浮子的工作原理.我有一个外部div和一个内部div,里面有内容.它的高度可能会根据内部div的内容而有所不同,但似乎我的内部div会溢出它的外部div.这样做的正确方法是什么？
<html>
<body>
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
<div style="width:500px; height:200px; background-color:black; float:right"></div>
</div>
</body>
</html>推荐指数
解决办法
查看次数
父高不跟随他们的浮子
我的mainContainer高度不遵循他们的孩子宽度
这是我的代码你有什么建议请指教.
我需要CSS解决方案而不是JavaScript,所以提前感谢
<div id="mainContainer">
<div id="leftContent">
</div>
<div id="rightContent">
</div>
</div>
这是我的CSS
#mainContainer{
width: 1000px;
/*height: 1000px;*/
height:auto;
margin-left:auto;
margin-right:auto;
background-color: #ff6600;
padding-bottom: 20px;
}
#leftContent{
height: 100px;
float: left;
width: 380px;
background-color: violet;
}
#rightContent{
height: 100px;
float: right;
width: 620px;
background-color: yellow;
}
推荐指数
解决办法
查看次数
css背景颜色与浮动元素
假设我们有这个非常简单的场景
<div class="content">
<div class="left">
<p>some content</p>
</div>
<div class="right">
<p>some content</p>
</div>
</div>
<div class="content">
<div class="left">
<p>some content</p>
</div>
<div class="right">
<p>some content</p>
</div>
</div>
这就是造型:
.content {
width: 960px;
height: auto;
margin: 0 auto;
background: red;
clear: both;
}
.left {
float: left;
height: 300px;
background: green;
}
.right {
float: right;
background: yellow;
}
事情是......当我向它添加内容时应该拉下父div,我们需要看到红色背景......事情是,我看不到红色背景填满所有高度.
有任何想法吗？？？
非常感谢先进.
编辑: 这是一个小提琴测试
推荐指数
解决办法
查看次数
布局divs使用包装或仅使用CSS并排
我正在开发一个控件,旨在显示日历网格上的活动块.它是一个简单的JavaScript/CSS,依赖于jQuery进行DOM操作等.这是一张图片:
有A和B带,每个带包含几个活动块([1,2],[3,4]).活动可以重叠或相继跟随.我的目标是相应地放置活动块:如果活动重叠如[1,2],我希望它们像图中那样包裹并且彼此叠加; 如果它们像[3,4]那样顺序,我希望它们并排,不像图中所示.
另外,我希望乐队的(A,B)高度自动调整.因此,具有重叠活动块的带将具有带有连续块的带的高度的两倍.
在这一点上,我可以得到一个或另一个.
如果活动块具有display: block;,则无论它们是否实际重叠,活动都会换行(3,4).乐队的高度确实相应调整.
如果活动块有display: inline-block;,活动共享相同的高度,因此一个被另一个隐藏(1,2).乐队的高度保持一个活动块.
一切都是div,这是相关的HTML/CSS:
<div class="band">
<div class="activity-block" style="left: 331.429px; width: 11.4286px;"></div>
<div class="activity-block" style="left: 160px; width: 297.143px;"></div>
</div>
<div class="band">
<div class="activity-block" style="left: 205.714px; width: 22.8571px;"></div>
<div class="activity-block" style="left: 365.714px; width: 3417.14px;"></div>
</div>
<div class="band"></div>
乐队(A,B):
.band {
min-height: 20px;
}
活动块(1,2,3,4):
.activity-block {
background-color: #66C6C2;
border-radius: 3px;
display: block;
height: 20px;
margin-bottom: 5px;
margin-top: 5px;
position: relative;
}
left以及width从JavaScript设置活动块.
我想只使用两个CSS类,一个用于乐队,一个用于活动块.我意识到可以使用JavaScript实现目标,但我想知道这是否只能通过CSS实现.
推荐指数
解决办法
查看次数
使用浮动时Div崩溃
我有以下HTML,我想在按钮和文本后面显示蓝色背景.不幸的是,使用以下代码,蓝色背景消失.如果我删除了ids按钮和文本的CSS,则背景会回来.
我究竟做错了什么？
谢谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style>
#actions
{
background: blue;
}
#buttons
{
float: left;
}
#text
{
float: right;
}
</style>
</head>
<body>
<div id="actions">
<div id="buttons">
<input type="button" id="btnOne" value="Bla bla" />
<input type="button" id="btnTwo" value="Bla bla bls" />
</div>
<div id="text">Bla bla bla</div>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
flexbox将项目对齐到指定的基线？
我想知道在使用flexbox并尝试使用时是否有一种覆盖/指定基线的方法align-items: baseline.
我有一个flex容器,它包含几个不同的div(即title,img,body,description).
有了这些flex项目,我想以div的基线为中心.flex-body.它应该以"此处中心"文本的下划线为中心.
这就是我目前的尝试.
我希望它看起来像这样,每一行都有以"中心在这里"下划线为中心的弹性项目 - 没有完美排列,因为我只是在那里粘贴边缘以使图像看起来像我的样子通缉:P
如果将项目与基线对齐是我需要的,我如何使用它将我的flex divs置于项目中间的下划线？
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 350px;
background-color: lightgrey;
flex-wrap: wrap;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
margin: 10px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-img {
justify-content: center;
align-items: center;
}<div class="flex-container">
<div class="flex-item">
<div class="flex-title">
flex title1
</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'> …推荐指数
解决办法
查看次数
用户档案栏更好的方法
我目前在这里遇到一个小问题.我用过这样的标记:
片段
$(function () {
$(".more-options").click(function () {
$(this).closest(".user-profile").toggleClass("open");
return false;
});
});/* Reset */
* {margin: 0; padding: 0; list-style: none; font-size: 12pt;}
a {text-decoration: none;}
/* Main CSS */
.user-profile {border: 1px solid #999; overflow: hidden; position: relative; margin: 25px 0;}
.user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; float: left;}
.user-profile p:first-child {margin: 3px 0 0;}
.user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat …推荐指数
解决办法
查看次数
为什么在Firefox上包装,带有display:block; 溢出:隐藏在显示内:内联块？
码
#a {
display: inline-block;
}
#b {
float: left;
}
#c {
display: block;
overflow: hidden;
}<span id="a">
<span id="b">b</span>
<span id="c">c1 c2</span>
</span>在Chrome和IE上,它会呈现为:
但是,Firefox将其呈现为:
你可以在这个jsFiddle中试试.
问题
- 为何如此区别？这是Firefox的错误吗？(如果是,一个bug,我会对bug的链接感兴趣,所以我可以投票给它修复.)
- 考虑到下一节中提到的一些限制,如何让Firefox像Chrome一样呈现这个？
上下文
这里只是一些背景,没有它,我上面试图做的事情似乎很疯狂.我打算使用上面的块作为标签,例如:
元素#a,#b和,#c对应于:
CSS旨在处理以下约束:
- 需要这个与IE8一起使用(对我来说没有flexbox).
- 块
#a是可点击的,我不希望它比必要的更多地向右扩展,因此inline-block.但显然,另一种方法也可以. #c如果块变得太长,则必须包装,并且不应该在"下面"块#b,如下所示.这解释了overflow: hidden或display: table.
推荐指数
解决办法
查看次数
CSS在另一个div中浮动div
我有一个div向左浮动,另一个浮动到主要主div,包括浮动div没有到达页面的底部,代码示例是:
<div style=" width: 900px; height:auto; margin:5px auto; background:#666; ">
<div style="float:left;">
Some content! Some content! Some content!
</div>
<div style="float:right;">
Some content! Some content! Some content!
</div>
</div>
有什么问题？
推荐指数
解决办法
查看次数