相关疑难解决方法(0)
display:inline-flex和display:flex之间有什么区别？
我试图垂直对齐ID包装器中的元素.我将属性display:inline-flex;赋予此ID,因为ID包装器是flex容器.
但是演示文稿没有区别.我希望能够显示包装器ID中的所有内容inline.为什么不呢？
#wrapper {
display: inline-flex;
/*no difference to display:flex; */
}<body>
<div id="wrapper">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
</body>推荐指数
解决办法
查看次数
为什么这些内联块div元素之间存在无法解释的差距？
我有两个内嵌块div元素,它们是相同的,彼此相邻.然而,尽管边距设置为0,但两个div之间似乎有一个4像素的神秘空间.没有父div影响它们 - 发生了什么？
CSS
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
这就是我想要的样子:
推荐指数
解决办法
查看次数
忽略HTML中的空格
HTML/CSS中是否有任何东西告诉浏览器完全忽略空格？
很多时候,当你想把两个图像放在一起时 - 你会拼命地保持HTML的可读性,但浏览器会在它们之间留一个空格.
所以不是这样的:
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
你最终得到了这个
<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />
哪个太可怕了!
推荐指数
解决办法
查看次数
内联块列表项之间的空格
为什么内联块列表项中有空格？无论我如何将我的列表项目放入菜单,我总是得到空格.
li {
border: 1px solid black;
display: inline-block;
height: 25px;
list-style-type: none;
text-align: center;
width: 50px;
}
ul {
padding: 0;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>推荐指数
解决办法
查看次数
显示:内联块额外边距
我正在使用一些div设置为display: inline-block并且有一组height和的s width.在HTML中,如果每个后面都有一个换行符,则会div在div的右下角添加一个自动5px边距.
例:
<div>Some Text</div>
<div>Some Text</div>
有没有我忽略的财产可以让我重置自动保证金？
更新
从我发现的,没有办法删除边距...除非你要么在同一行上有所有内容,或添加注释以注释掉换行符.例:
<div>Some Text</div><!--
--><div>Some Text</div>
不是最好的解决方案,但如果您有多行,仍然更容易阅读.
推荐指数
解决办法
查看次数
如何在绝对定位的父div中垂直居中div
我试图在粉红色的容器中间获得蓝色容器,但是vertical-align: middle;在这种情况下似乎不能完成工作.
<div style="display: block; position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
<div style="background-color: lightblue;">test</div>
</div>
</div>
结果:
期望:
请建议我如何实现这一目标.
推荐指数
解决办法
查看次数
使用display的优点:inline-block vs float:在CSS中保留
通常情况下,当我们想要DIVs连续使用多个时float: left,我现在会发现它的诀窍display:inline-block
示例链接在这里.在我看来,这display:inline-block是一个更好align DIVs的连续方式,但有任何缺点吗？为什么这种方法不那么流行float呢？
推荐指数
解决办法
查看次数
两个直线块元件,每个50%宽,不能并排安装在一排中
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>
JSFiddle:http://jsfiddle.net/5EcPK/
上面的代码试图将#left div和#right div并排放在一行中.但正如您在上面的JSFiddle URL中看到的那样,情况并非如此.
我能够解决问题,将其中一个div的宽度减少到49%.见http://jsfiddle.net/mUKSC/.但这不是一个理想的解决方案,因为两个div之间会出现一个小差距.
我能够解决问题的另一种方法是浮动两个div.见http://jsfiddle.net/VptQm/.这很好用.
但我原来的问题仍然存在.为什么当两个div保持为内联块元素时,它们并不适合并排？
推荐指数
解决办法
查看次数
使用CSS删除图像之间的空间
鉴于:
<img src="..."/>
<img src="..."/>
结果是两个图像之间有一个空格.似乎正常行为是将任意数量的空格,换行符和制表符显示为单个空格.我知道我可以做到以下几点:
<img src="..."/><img src="..."/>
要么
<img src="..."/><!--
--><img src="..."/>
要么
<img src="..."/
><img src="..."/>
或任何数量的其他黑客.有没有办法用CSS删除那个空格？例如
<div class="nospace">
<img src="..."/>
<img src="..."/>
</div>
推荐指数
解决办法
查看次数
Bootstrap行与不同高度的列
我目前有类似的东西:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
现在假设,content是不同高度的盒子,具有相同的宽度 - 我怎么能保持相同的"基于网格的布局",并且所有盒子彼此排列,而不是完美的线条.
目前TWBS将下一行col-md-4置于前三行中最长元素下面,因此每行项目完全对齐干净 - 虽然这很棒但我希望每个项目直接落在最后一个元素下("砌体"布局) )
推荐指数
解决办法
查看次数