CSS - 使divs水平对齐

我有一个固定宽度和高度的容器div，其中overflow：hidden。CSS - 使divs水平对齐

我想要一个水平行的float：在这个容器内的左边div。当他们阅读父母的正确界限后，浮动的左边自然会自动推到下面的'行'上。即使父母的身高不应该允许这种情况，也会发生这种情况。这就是这个样子：

[错误] [1] - 已被换成了一个广告去除图像窝棚图像

如何，我想它看起来：！

[右] [2] - 已被换成了一个广告去除图像窝棚图像

注：我想可以通过使用内联元素&空格来达到的效果：无包装（即我是如何做到的在所示的图像中）。然而，这对我来说并不好（因为在这里解释太冗长的原因），因为子div需要浮动块级元素。

来源

2008-08-31 Robin Barnes

您的图片链接似乎已损坏。如果你仍然有原件，请重新上传到stack.imgur。谢谢！ – 2015-07-27 08:18:37

您可以将一个内部div放在足够宽的容器中以容纳所有浮动的div。

#container { 
 
    background-color: red; 
 
    overflow: hidden; 
 
    width: 200px; 
 
} 
 

 
#inner { 
 
    overflow: hidden; 
 
    width: 2000px; 
 
} 
 

 
.child { 
 
    float: left; 
 
    background-color: blue; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="container"> 
 
    <div id="inner"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    </div> 
 
</div>

来源

2008-08-31 21:29:59 LucaM

这似乎接近你想要什么：

#foo { 
 
    background: red; 
 
    max-height: 100px; 
 
    overflow-y: hidden; 
 
} 
 

 
.bar { 
 
    background: blue; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    margin: 1em; 
 
}

<div id="foo"> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
</div>

来源

2008-08-31 21:24:05

可以使用clip属性：

#container { 
    position: absolute; 
    clip: rect(0px,200px,100px,0px); 
    overflow: hidden; 
    background: red; 
}

注意position: absolute并且为了获得clip需要overflow: hidden上班。

来源

2008-08-31 21:28:31 fcurella

什么是剪辑的浏览器支持？ – alex 2008-10-28 06:27:30

来自http://www.w3schools.com/cssref/pr_pos_clip.asp： clip属性在所有主流浏览器中均受支持。注意：“继承”值在IE7及更早版本中不受支持。 IE8需要！DOCTYPE。 IE9支持“继承”。 – dsomnus 2012-08-16 17:56:40

style="overflow:hidden"父div和style="float: left"所有的孩子都divs使divs水平对齐老的浏览器IE7一样以下重要。

对于现代浏览器，您可以使用style="display: table-cell"为所有子女divs，它将水平正确渲染。

来源

2011-04-13 11:17:50 Kwex

将它们浮起。在Chrome中，至少，你不需要在LucaM的例子中有一个包装，id="container"。

来源

2012-07-30 07:57:55

float：left，display：inline-block如果超过容器的宽度，将无法水平对齐元素。

重要的是要注意容器不应包装如果元素必须水平显示是很重要的： white-space: nowrap

来源

2015-08-28 17:57:15

您现在可以使用CSS Flexbox的水平和垂直对齐的div如果你需要。通用公式就是这样的

parent-div { 
    display:flex; 
    flex-wrap: wrap; 
    justify-content: center ; /* for horizontal aligning of child divs */ 
    align-items : center ; /* for vertical aligning */ 
    } 
child-div { 
    width: /* yoursize for each div */ ; 
}

来源

2016-07-17 10:58:04

CSS - 使divs水平对齐

回答

相关问题