5

我是设计新手，所以有一些问题......

在此处输入图像描述

我需要 3 个块内联和居中，所以我尝试了：

#main .block{
    display: inline-block;
    border: 1px solid #ECEDE8;
    margin: 10px 10px;
    overflow: hidden;
    height: 265px;
    width: 265px;
}

但是，当我将图像添加到块中时，所有其他图像都会下降。

附言

如我所见，这个问题在 safari 中，在 Firefox 中都可以。

PSS

<div id="main">
<div class="block">main
<img src="style/images/try.png">
</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
</div>

PSSS

正如我想谷歌所想的那样，所有问题都在显示：inline-block，在 safari 作品中显示：inline-table。可能有什么解决方案？

4

4 回答 4

7

您需要设置垂直对齐属性。在这种情况下，最好的选择可能是：

vertical-align: top

所以你的CSS应该是：

#main .block{
    display: inline-block;
    border: 1px solid #ECEDE8;
    margin: 10px 10px;
    overflow: hidden;
    height: 265px;
    width: 265px;
    vertical-align: top;
}
于 2012-06-13T23:46:51.217 回答
0

如果您的块是固定宽度的，为什么不浮动它们并将它们放在具有总宽度并使用 margin: 0 auto 居中的父容器中

于 2012-06-13T23:44:41.583 回答
0

div 元素是块元素。img 元素是一个 inline-block 元素；它具有内联元素的主要特征（除了它具有高度和宽度的块元素特征）。因此，我发现您的代码存在两个主要问题。首先，您的图像以某种方式替换了与您同时显示单词“main”的空间相同的单位，这可能会导致与间距/显示发生冲突。[我建议从您的 HTML 中删除单词“main”。] 其次，您没有指定图像的高度和/或宽度，这并不是真正的问题，因为您将溢出值设置为隐藏，但通常您仍然可以应该分配一个高度和/或宽度值（使它们小于父容器' s 高度和宽度），因为它将使浏览器呈现/显示更通用/兼容的跨浏览器。实现这两件事的组合[或将显示值更改为 inline-table （它看起来更像你想要的，因为你的显示看起来像“表格”）]应该解决你的问题。如果不是，我建议将您的边距值更改为 0 auto （这将使您的图像在 div/父容器的中间居中），因为我一直怀疑您的边距值也可能是发挥作用（但前提是其他两个建议不起作用）。祝你好运！)] 应该解决您的问题。如果不是，我建议将您的边距值更改为 0 auto （这将使您的图像在 div/父容器的中间居中），因为我一直怀疑您的边距值也可能是发挥作用（但前提是其他两个建议不起作用）。祝你好运！)] 应该解决您的问题。如果不是，我建议将您的边距值更改为 0 auto （这将使您的图像在 div/父容器的中间居中），因为我一直怀疑您的边距值也可能是发挥作用（但前提是其他两个建议不起作用）。祝你好运！

PS：记住，仅仅因为你有溢出：隐藏并不意味着浏览器没有“看到”溢出的元素。记住盒子模型。

于 2017-08-12T15:32:24.953 回答
0

尝试这个 -

<div class="main" id="main">
<div class="block">main
<img src="style/images/try.png">
</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>

而#main .block{不仅仅是.main {

于 2019-02-18T20:16:38.270 回答