相关疑难解决方法(0)
div内的图像在图像下方有额外的空间
为什么在下面的代码中高度div大于img？图像下方有一个间隙,但它似乎不是填充/边距.
图像下方的间隙或额外空间是多少？
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
推荐指数
解决办法
查看次数
删除图像下方的空白区域
在Firefox中,只有我的视频缩略图在我的图像底部和边框之间显示神秘的2-3像素空白区域(见下文).
我已经尝试过在Firebug中我能想到的一切,但没有运气.
如何删除此空格？
推荐指数
解决办法
查看次数
使图像响应 - 最简单的方法
我一直在寻找解决方案,但没有运气.
我注意到我的代码是响应式的,事实上,如果我将其缩小到手机或平板电脑的大小 - 所有文本,链接和社交图标都会相应缩放.
然而,唯一没有的是我体内的形象; 它包含在段落标签中..据说,有一种简单的方法可以使图像响应吗？
谢谢!
这是我以前用我的图像显示在身体中的代码:
<body>
</center>
<p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
</center>
</body>
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
对象适合不影响图像
我一直在尝试使用object-fit放置在article元素内部的一些图像,但它似乎根本不会影响它们.
该object-fit属性的期望值将是cover,但截至目前,其他任何值似乎都不起作用.
当我改变它的价值时,它们不会缩小,不会增长,不会......没有.
如果您看到CodePen,则两行之间会有空格,并且图像不会占用所有相同的空间/高度(正如预期的那样object-fit: cover).
body{
margin: 0 auto; padding: 0;
}
main{
min-height: 70vh;
padding: 0;
}
main > section.posts{
box-sizing: border-box;
margin: 0; padding: 0;
display: flex;
flex-flow: row wrap;
}
main > section.posts > article{
outline: 1px solid red;
width: 22vw;
min-height: 100vh;
margin: 0; padding: 0;
flex-grow: 1;
overflow: hidden;
box-sizing: border-box;
}
main > section.posts > article > img{ /* Our suspect */
object-fit: …推荐指数
解决办法
查看次数
为什么'div> a> img'的高度大于包装img的大小？
如果我将img的大小设置为100*100,则包含的div将为100*106.
额外的'6px'来自哪里？这种行为如何符合标准？
推荐指数
解决办法
查看次数
文本区域下的额外填充
我的文本区域下面有额外的填充,但我似乎无法找到它的来源.我已将个别代码放在此页面上:
我似乎无法找到它的来源.它有类"字段":
.field { background-color: white; width: 430px; padding: 10px; font-family:arial, sans-serif; border: 1px solid #CCC; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
任何输入(双关语)将不胜感激:)
推荐指数
解决办法
查看次数
沿行对齐图像高度
努力使事情表现出来。
我在响应网站上有动态图像列表。生成布局时，图像可以在行/列或列行中。
这个例子很接近，但是当浏览器调整大小时，成对的图像在底部不对齐...
<div style="width:100%;">
<div style="width:60%; display: flex; margin-left: auto; margin-right: auto;">
<div id="outterrow" style="width:100%; float:left; display: flex; padding-bottom: 1.15%; ">
<div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;">
<div id="row" style=" padding-right: 2.330294%; "><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%">
</div>
</div>
<div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;">
<div id="row" style=" "><img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg" sizes="100vw" width="100%"> </div>
</div>
</div>
</div>
<div style="width:60%; display: flex; margin-left: auto; margin-right: auto;">
<div id="outterrow" style="width:100%; float:left; display: flex; padding-bottom: 1.15%; ">
<div id="column" style="float: …推荐指数
解决办法
查看次数
当子文本换行到2行或更多行时,保持flexbox容器居中
我试图div用flexbox(display:flex)将两个元素并排连续居中.
div左边的第一个元素只有一个图像.
div右边的第二个元素具有未指定长度的左对齐内联文本.
当文本行足够短以适合一行时,两个div都按照我的预期对齐并对齐到中心.
当文本行足够长以包裹到两行时,第二个div元素不会像我期望的那样将自己包裹在内容周围.相反,它在右侧留下了一个很大的空白区域div.
我在这里嘲笑了一个例子:http://codepen.io/anon/pen/NGqYQX？edit = 110.改变浏览器窗口的宽度,看看我的意思.
如何设置第二个div元素以缩小自身以适合文本,以便两个div元素都显示为居中？
HTML:
<div class="flexbox-container">
<div class="div1">
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
</div>
<div class="div2">
This is an example of a line of text.
</div>
</div>
<br>
<div class="flexbox-container">
<div class="div1">
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
</div>
<div class="div2">
This is an example of a much loooooooooooooonger line of text.
</div>
</div>
CSS:
.flexbox-container {
display: flex;
justify-content: center; …推荐指数
解决办法
查看次数
为什么我的textarea比邻居更高？
图片:
.left {
border: 1px solid red;
}
textarea {
border: 1px solid blue;
}
.parent {
border: 1px solid green;
}<div class='parent'>
<span class='left'>
<span>one</span>
<span>two</span>
</span>
<textarea></textarea>
</div>推荐指数
解决办法
查看次数
如何摆脱网格之间的空白？
我正在制作网格，但是上方网格区域下方有一个空白区域。
这是我指的空白。
我正在使用70％30％的网格列模板创建模板。在此之下，我正在使用网格模板区域来扩展整个底部的描述
.home {
display: grid;
grid-template-columns: 70% 30%;
grid-template-areas:
"hero right-home"
"home home"
}
有没有适当的方法来删除上下网格行之间的空间？ Codepen在这里
和摘要：
.home {
display: grid;
grid-template-columns: 70% 30%;
grid-template-areas:
"hero right-home"
"home home"
}
body, html {
margin: 0;
padding: 0;
}
.right-home {
grid-area: right-home;
display: grid;
grid-template-rows: 1fr 1fr;
}
.home-wrapper{
background-color: #e6e6e6;
width: 100%;
grid-area: home;
}
.home-container {
width:80%;
margin: auto;
padding-bottom: 40px;
}
.hero {
grid-area: hero;
}
#main-map {
max-width: 96%;
}
#main-map iframe { …推荐指数
解决办法
查看次数
带有图像和分隔符的完全对齐的水平菜单
我想实现这个完全合理的水平菜单：
对齐是通过 Flexbox 完成的并且有效，但是我也无法使分隔的中点对齐；它们是通过伪类使用 css-content 制作的。另外，我想知道是否有更好的方法来垂直居中项目，而不是通过添加填充来伪造它，就像我所做的那样。
这是我的代码和小提琴：
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
li.home {
padding: 0;
}
li {
vertical-align: middle;
padding-top: 10px;
}
nav {
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 40px;
}
li::after {
//padding: 0em 0.4em;
content: '\00b7';
pointer-events: none;
}
li.home::after,
li.last::after {
content: none;
text-align: justify;
}<nav id="main-menu">
<ul>
<li class="home">
<a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
</li>
<li class="second"><a href="#">Item 1</a></li>
<li><a href="#">Item …推荐指数
解决办法
查看次数