如何设置DIV的宽度以匹配其内容

如果我希望它的宽度与内容的宽度完全相同，如何设置div的宽度。然而，我的DIV中有很多孩子不可避免地崩溃，因为他们占用了比div允许的更多的横向空间。如何设置DIV的宽度以匹配其内容

我有这样的CSS：

.outer{ 
     width: 100%; 
     background-color: green; 
    } 

    .inner{ 
     width: auto; 
     display: inline-block; 
     margin: 0 auto; 
     background-color: red; 
    } 

    .row{ 
     float: left; 
     width: 250px; 
     background-color: blue; 
     display: inline-block; 
    }

这是我的HTML：

<div class="outer"> 
    <div class="inner"> 
     <div class="row">asd1</div> 
     <div class="row">asd2</div> 
     <div class="row">asd3</div> 
     <div class="row">asd4</div> 
    </div> 
    <div class="clear"></div> 
</div>

这里是我的jsfiddle：http://jsfiddle.net/vullnetyy/pshao68g/

我想在这里做的是：

红色的div必须是确切的ÿ一样宽其第一行中的3周蓝色的div
红色DIV必须绿色DIV
的javascript必须避免
没有静态宽度可以被设置为红色或绿色的div内居中（因为这应该是响应的，并且可以提供任意数量的蓝色div）

来源

2015-09-01 vullnetyy

你可以看一下新的'flexbox'。这会让你的任务更容易，但是在所有浏览器上都不支持。 – Haneev

只需将'.inner'的背景设置为透明就可以了。 http://jsfiddle.net/uxtj4tmf/1/ – Boaz

@波兹你没有解决我的问题 – vullnetyy

这里有两个相冲突的问题。

1）您必须有一个设置宽度才能进行margin-left/right auto。

2）如果你漂浮试图匹配子宽度，你不能做边缘自动。现在我知道你没有把内在的浮动留下。但是你确实做了显示：内联块，其中有左浮动和其他一些附加规则。

在这种特殊情况下，您必须妥协一点才能得到您想要的结果。简单地将.inner设置为与另一个250px相同，因为我们知道孩子将会有多大，并删除显示：inline-block和PRESTO！

试试这个给你的内在，看看会发生什么。

.inner{ 
     width: 250px; 
     margin: 0 auto; 
     background-color: red; 
    }

来源

2015-09-01 20:34:27

首先，如果你想中心的元素，你需要使它：

display: block; 
width : %/px; 
margin-left: auto; 
margin-right:auto;

如果你想在3周蓝色的div是红色div中，并正好3蓝色= 1red宽度，给出每个蓝色33.333％的宽度。

如下面的例子：https://jsfiddle.net/vullnetyy/pshao68g/

来源

2015-09-01 20:46:42 ohadsas

如何设置DIV的宽度以匹配其内容

回答

相关问题