Div实际自动宽度

我有一个div，基本上是一个float: left更小的div。我希望整个网格具有自动宽度，并且它将相对于其容器居中。 display: inline-block到网格+ text-align: center到容器不会产生所需的结果。看来，一旦使用多个div填充网格以创建新行，网格的宽度会最大化为容器宽度，即使较小的div不完全适合该行，并且右侧仍有一些空白区域。Div实际自动宽度

解决方案是什么？ enter image description here

来源

2012-09-08 user1639431

你能在一些混合正确格式化？ – Grixxly

我想你需要在容器上指定一个宽度。 –

为什么float您的较小div s在第一位？在它们上使用display: inline-block;时，您可以在对中时获得更多控制权，并且还可以通过执行display: inline-block;以使容器width'自动'。这是一个小工作演示：little link。

这里的基本轮廓，HTML：

<div class = "container"> 
    <div class = "floatcontainer"> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <br/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
    </div> 
</div>

CSS：

.container { 
    width: 100%; 
    text-align: center; 
} 
.floatimg { 
    width: 100px; 
    display: inline-block; 
    margin: 15px; 
} 
.floatcontainer { 
    display: inline-block; /*makes the div's width only as large as needed*/ 
    text-align: center; 
}

希望这有助于！

来源

2012-09-08 15:43:30 Chris

我在想每行应该只有3格，很难从描述中看出来。 – tsergium

@tsergium那么，可以通过添加'white-space：nowrap;'强制每行有3个'div'。我希望@ user1639431能清楚地说明他心中的想法。 – Chris

你应该在这里使用表格，但如果不是这样的话，试试这个fiddle我所做的。

HTML

<!DOCTYPE html>

演示

CSS

.container{ 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #000; 
} 
.item{ 
     height: 10px; 
     margin-top: 10px; 
     margin-right: 2%; 
     width: 32%; 
     float: left; 
     background-color: #dfdfdf; 
    } 
    .mr0{ 
     margin-right: 0; 
    } 
    .clear{ 
     clear: both; 
    }

来源

2012-09-08 15:49:45 tsergium

我不认为''div在你的演示中居中，它们只有32％的宽度。 – Chris

简简单单就和使用

div.big { 
width:100%; 
} 
div.small { 
    width:33.33% 
}

来源

2016-08-26 12:15:22 Daut

Div实际自动宽度

回答

相关问题